Hago esta pregunta para confirmar mi comprensión de algún concepto.
El documento de React es enfático en incluir todas las dependencias utilizadas en la devolución de llamada useEffect(). Como se explica en el documento:
De lo contrario, su código hará referencia a valores obsoletos de representaciones anteriores.
Entiendo de dónde viene esta explicación. Pero lo que me preocupa es la parte del "valor obsoleto". No veo ninguna forma posible de que se produzcan valores obsoletos debido a una dependencia faltante. Mi argumento también está respaldado por lo que está en el documento:
Los desarrolladores de JavaScript con experiencia pueden notar que la función que se pasa a useEffect va a ser diferente en cada renderizado. Esto es intencional. De hecho, esto es lo que nos permite leer el valor de conteo desde dentro del efecto sin preocuparnos de que se vuelva obsoleto.
En cuanto a mi entendimiento, si no enumeramos una dependencia, el efecto no se ejecutará después de un renderizado causado por ese cambio de dependencia porque React no cree que el efecto dependa de él. Si adivino, puede ser la situación a la que el documento se refiere como referencia a datos obsoletos. De hecho, esos datos están obsoletos en el código de efectos. Sin embargo, la devolución de llamada del efecto no se ejecuta en primer lugar. No notaré que los datos estén obsoletos hasta que se ejecute el efecto. Si eso importa, primero averiguaré por qué el efecto no se ejecutó y resolveré el problema. No estaría confundido por la obsolescencia de los datos, sino por el hecho de que el efecto no funcionaría.
Además, supongamos que el efecto se ejecuta después de un renderizado causado por otro cambio de dependencia. En este escenario, incluso si perdiéramos una dependencia, no leeríamos datos obsoletos gracias al motivo de cierre mencionado anteriormente. Experimenté un poco para confirmar esto :
export default function App() { const [count1, setCount1] = useState(0); const [count2, setCount2] = useState(10); useEffect(() => { console.log(count2); }, [count1]); return ( <div className="App"> <div> Count1: {count1} <button onClick={() => setCount1(count1 + 1)}>increase</button> </div> <div> Count2: {count2} <button onClick={() => setCount2(count2 + 1)}>increase</button> </div> </div> ); }Siempre obtenemos el último recuento2, siempre que se ejecute el efecto. Entonces, ¿se sostiene mi entendimiento?
Quiero saber por qué React recomienda tanto la inclusión de todas las dependencias. La gente suele utilizar la matriz de dependencias con la intención de eludir la ejecución de algún efecto. Si omiten una dependencia, es probable que sea lo que quieren. Si se trata de un desliz, notarán fácilmente que el efecto no se ejecuta y tomarán medidas.
Modifiqué ligeramente su ejemplo para mostrar valores obsoletos.
Los efectos se utilizan a menudo por razones asíncronas, por lo que esto no es inusual.
Básicamente se trata de cierres, una primera representación de useEffect creará un cierre en count1 y count2, si el efecto no se vuelve a ejecutar en todas las dependencias, estos cierres permanecerán (obsoletos).
Hacer clic en count1 significa que useEffect se vuelve a llamar, se crea una nueva instancia de setInterval, con una copia nueva (no obsoleta) de count1 y count2. Debido a que count2 no está en la matriz de dependencias, hacer clic en count2 significará que no se crea un nuevo setInterval, y las copias obsoletas de count1 y count2 se mantienen en la memoria.
Para ser justos, esta es probablemente un área de Hooks que puede ser difícil de entender. Es fácil pensar en los Componentes Hook como si las clases con datos fueran parte del Objeto. Pero en realidad, los componentes de gancho son solo funciones de representación, useState / useEffect, etc., se cargan lateralmente en la canalización de la función de representación. En comparación, un componente de clase React tiene sus datos almacenados con la instancia del objeto, por lo que this.xyz nunca está obsoleto.
const {useState, useEffect} = React; function App() { const [count1, setCount1] = useState(0); const [count2, setCount2] = useState(10); useEffect(() => { const tm = setInterval(() => { console.log(count1, count2); }, 1000); return () => clearInterval(tm); }, [count1]); return ( <div className="App"> <div> Count1: {count1} <button onClick={() => setCount1(count1 + 1)}>increase</button> </div> <div> Count2: {count2} <button onClick={() => setCount2(count2 + 1)}>increase</button> </div> </div> ); } ReactDOM.render(<App/>,document.querySelector('#mount')); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="mount"></div> <p>Increase count2, see the console not update until you increase count1,.</p> <p>Add count2 to the dependancy, and then everything will keep in sync</p>Su código de ejemplo muestra el ejemplo más simple, en un escenario extremadamente simple. De forma predeterminada, useEffect se ejecutará en cada renderizado de su componente. Usando la matriz de dependencia, la función interna solo se ejecuta cuando uno de esos valores cambia. Personalmente, me encontré con escenarios en los que olvidé una dependencia, mi efecto se disparó y un valor en mi función tenía datos obsoletos. Es probable que esto se deba a que había varias partes del proceso en curso a la vez, cuando un cambio desencadenó el efecto y la otra parte de los datos aún no se había puesto al día. Cambiar a usar useReducer para controlar varios bits de estado simultáneamente, en lugar de usar múltiples useState , ayudó en algunas de esas situaciones, pero en última instancia, la matriz de dependencias lo mantuvo en línea. Además (y no he confirmado esto), el código del marco para useEffect probablemente haga un uso intensivo de los cierres, por lo que, nuevamente, se trata de asegurarse de que hace referencia a los puntos de datos en el momento correcto del proceso.