Fui entrevistado con las siguientes preguntas, obtuve la respuesta explicada por mi entrevistador. Pero después de la entrevista, traté de recrear el problema. Obtuve resultados diferentes

Aquí está el código y la respuesta es para explicar lo que se imprimirá en la consola.

 function App() { const [foo, setFoo] = useState('a'); useEffect(() => { setFoo('b'); }, []); useEffect(() => { console.log("effect ", foo); }, [foo]); console.log("render ", foo); return ( <div></div> ); }

Lo siguiente es mi entendimiento (y la explicación del entrevistador)

1. renderizará los componentes
2. encontrado con useEffect y los almacenó en la pila primero
3. 'hacer un'
4. Tengo que lidiar con lo que hay dentro de la pila
5. Primero useEffect -> sabe que tenemos que configurar Foo, pero espere hasta que se procese otro useEffect
6. Segundo usoEfecto -> 'efecto a'
7. setFoo('b') y volver a renderizar
8. Pase el primer useEffect ya que es una dependencia vacía
9. poner el segundo efecto de uso en la pila
10. 'hacer b'
11. lidiar con el segundo efecto de uso -> 'efecto b'

Así que la salida se supone que es

 'render a' 'effect a' 'render b' 'effect b'

pero cuando ejecuté el código, lo que obtuve es

 'render a' 'effect a' 'effect a' 'render b' 'effect b'

¿Por qué hay un 'efecto a' adicional?

¿Y hay algún material de lectura sobre el ciclo de vida de los componentes funcionales?