He estado experimentando con setInterval . Ambos códigos se ejecutaron en Chrome. A continuación se muestra mi componente de reacción.
function App() { let [value, setValue] = useState(0); useEffect(() => { const id = setInterval(() => console.log(value), 1000); return () => clearInterval(id); }, []); return ( <div className="App"> <p>{value}</p> <button onClick={() => setValue(value + 1)}>+</button> <button onClick={() => setValue(value - 1)}>-</button> </div> ); } El archivo console.log en setTimeout dentro de useEffect sigue imprimiendo 0 sin importar cuántas veces aumente o disminuya el valor al hacer clic en el botón.
El siguiente código se está ejecutando en la consola del navegador (Chrome)
let value = 0; setInterval(() => console.log(value), 1000); value = 3; // can be considered as setValue (sort of) Ahora la consola del navegador imprime 3 que se espera.
Me pregunto por qué hay una diferencia en el comportamiento y agradecería si alguien pudiera señalar la razón de esto. Cualquier otro fragmento de código o enlace que demuestre esto aún mejor sería genial.
Debe pasar el value como una dependencia a su useEffect. A menos que proporcione la lista de elementos de los que depende su efecto en la matriz de dependencia, seguirá usando el value inicial.
useEffect(() => { const id = setInterval(() => console.log(value), 1000); return () => clearInterval(id); }, [value]);En su ejemplo, useEffect solo funciona una vez cuando se carga la página. Es por eso que solo obtienes console.log(0). Si desea hacerlo cuando cambie el valor, debe especificarlo en useEffect
Por ejemplo
UseEffect(() =>{ console.log(value) }, [value])En su ejemplo, cuando hace clic en el botón, el primer valor se establece después de que useEffect funcione y la función setInternals se active después de 1s.