Tener una variable en la matriz de dependencias no está vinculado al hecho de que es un conjunto de state con algún setState . Siempre que esté en la matriz y cambie, la devolución de llamada de useEffect se vuelve a llamar. Ahora, ¿cómo nota useEffect ese cambio? Bueno, hace una diferencia cada vez que el componente se vuelve a renderizar. Dentro de un componente , solo un conjunto de state con setState puede volver a representar ese componente.

Si ya entendió el mecanismo, puede detenerse aquí y construir su increíble producto con React :). De lo contrario, sigue leyendo. Hice un ejemplo para explicar más.

Digamos que tenemos el siguiente componente. Deberíamos tener Hello Word registrado en la consola cuando el componente se renderiza por primera vez, y cada vez que cambia rand . Al hacer clic en ese button , cambia rand , pero no tendremos un nuevo registro, porque no hay una nueva representación ya que ningún state ha cambiado, por lo que useEffect no hizo una diferencia, por lo que no está al tanto del cambio.

 export default function Comp() { let rand = Math.random(); useEffect(() => { console.log("Hello Word"); }, [rand]); return ( <button onClick={() => { rand = Math.random() }}> New value </button> ); }

Tomemos este mismo componente y cambiémoslo un poco, como se muestra a continuación. Ahora, cada vez que hace clic en el botón, el componente se vuelve a renderizar, porque estamos configurando un state con setState , y mientras se vuelve a renderizar si el valor de rand cambia con respecto al anterior, obtendremos un nuevo registro.

 export default function Comp() { const [state, setState] = useState(true); // new line added let rand = Math.random(); useEffect(() => { console.log("Hello Word"); }, [rand]); // notice that the click handler has changed return ( <button onClick={() => setState(!state)}> New value </button> ); }

Cada vez que se vuelva a renderizar el componente, se evaluará el método Math.random , por lo que hará que useEffect se ejecute de nuevo (con la excepción de que rand ha cambiado).

En cambio, si será solo una constante, no volverá a ejecutar useEffect .

si console.log("hola") dentro de useEffect, verá que solo verá dos consolas que muestran "hola" (debido a componenteWillMount y componenteDidMount). Esto significa que su componente solo se volverá a representar si el valor de una variable de estado ha cambiado o si se modifican los accesorios que se le han pasado (por supuesto, los accesorios pasados tienen que ser un estado o, de lo contrario, no se volverá a representar).

Conclusión: solo el cambio en el valor del estado o los accesorios en un componente vuelve a generar el componente.