El número de renderizados es realmente correcto. Analicemos lo que sucede:

1. Representación 0 : esto se encuentra en el primer procesamiento de montaje (en este estado, cada useEffect de uso se ejecuta automáticamente)

2. Triggered 0 : esta es la activación inicial de useEffect

3. Representación 4 : esta representación se debe a que estableció el nuevo estado del index en 4

4. Activado 4 : esto se activa porque cambió index de 0 a 4

5. Representación 4 : esto se ejecuta porque el estado cambia de 4 a 4 (incluso el valor es el mismo, activará la representación del componente porque React no sabe si estableció el mismo estado y debe ejecutarse nuevamente). En esta representación , useEffect no se ejecuta porque index es 4 nuevamente.

Razón fundamental

Si algo cambia en un componente en cualquier momento, como useState useContext , customHook , ese componente deberá volver a procesarse. Esto también sucede si el componente principal se vuelve a renderizar, el componente secundario se volverá a renderizar incluso si su componente no tuvo ningún cambio.

Sugerencias e información de renderización adicionales

Para evitar que ocurra una reproducción innecesaria de los componentes secundarios, puede usar React.memo , esto volverá a procesar su componente si los accesorios cambian, pero no evitará que su componente se vuelva a procesar si el estado o cualquiera de los ganchos anteriores cambian allí.

Si esto parece redundante, lo parece, pero es necesario para que react esté seguro de que tiene el último estado. Ejecutar JS de esta manera es más rápido que tener una memoria de estado que verifique los cambios y también es más transparente para el desarrollador (y cómo se crea el VDOM )

No se puede lograr el resultado esperado.

useEffect se procesa cuando se monta el componente y cada vez que se vuelve a procesar cuando cambia el estado (índice).

 const Example = () => { const [index, setIndex] = React.useState(0) console.log('Rendering: ', index) React.useEffect(() => { console.log('Triggered: ', index) setIndex(4) }, [index]) return <h1>{index}</h1> }

Producción:

• Representación: 0 => Cuando el componente se monta por primera vez, ese índice de tiempo es 0
• Activado: 0 => En el montaje useEffect dispara y actualiza el estado (0 a 4)
• Renderizado: 4 => Componente vuelto a renderizar porque el estado ha cambiado de (0 a 4)
• Activado: 4 => useEffect reactivado porque el estado ha cambiado (0 a 4)
• Renderizado: 4 => Componente vuelto a renderizar porque para verificar si el estado ha cambiado o no (4 a 4, tipo de confirmación, nada cambió )

La forma en que funciona useEffect es que solo se ejecuta después de que se procesa el componente de la página.

Espero que esto te ayude a entender.

El primer índice de renderizado es 0.

 Rendering: 0

Activa el useEffect.

 Triggered: 0

El índice se actualiza en useEffect pero no en el componente. Luego render actualiza el índice a 4.

 Rendering: 4

useEffect se ejecuta porque el índice ha cambiado.

 Triggered: 4

El componente se vuelve a representar pero el índice sigue siendo 4, por lo que useEffect no se ejecutará nuevamente.

 Rendering: 4