Sé que este código funcionará y el valor de count se actualizará cada 2 segundos:
import React from 'react'; function App() { const [count, setCount] = React.useState(0); React.useEffect(() => { setInterval(() => { setCount(prev => prev + 1); }, 2000); }, []); return <h1>{count}</h1>; }Estoy tratando de entender por qué el siguiente código no funciona:
React.useEffect(() => { const interval = setInterval(() => { setCount(count + 1); console.log('hello'); }, 2000); return () => clearInterval(interval); }, []); En este caso, el count permanece en 1, pero se llama a setInterval cada 2 segundos porque hello se registra cada 2 segundos.
¿Cómo se llama a setInterval cuando el componente no se representa? ¿Opera fuera del ciclo de vida de React o algo así?
Cuando paso la devolución de llamada a setCount(prev => prev + 1) , ¿funciona bien? ¿Por qué? ¿Cómo la devolución de llamada prev obtiene el valor actualizado?
He leído respuestas similares, pero aún no tiene sentido para mí, así que si alguien pudiera aclarar la duda.
Gracias
¿Cómo se llama a setInterval cuando el componente no se representa? ¿Opera fuera del ciclo de vida de React o algo así?
Sí, setInterval es una función que forma parte del lenguaje central de javascript. Al llamar a setInterval, le pide al navegador que llame a la función especificada cada 2000 ms. React no está involucrado en esto.
Cuando paso la devolución de llamada a setCount (anterior => anterior + 1), ¿funciona bien? ¿Por qué? ¿Cómo la devolución de llamada anterior obtiene el valor actualizado?
El useState está diseñado para permitir esta interacción. React promete que si pasa una función a setCount , reaccionar llamará a su función y pasará el valor más reciente.
El código exacto con el que implementan esto puede ser complicado de seguir, ya que reutilizan muchas funciones de propósito general para implementar varios ganchos diferentes, pero si desea hurgar en su base de código, puede consultar aquí: https://github.com /facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js#L1525
Cuando cree la función de intervalo, la count será el valor en el momento de la creación (por lo tanto, 0). Cuando se llame más tarde, aún mantendrá ese valor, ya que no se cambiará en ese contexto. Entonces siempre lo establecerá en 0 + 1, entonces 1.
Cuando pasa una función de devolución de llamada, utilizará el valor correcto actual.
¡Espero que esto pueda aclarar las cosas!
Esta versión: setCount(prev => prev + 1) utiliza el valor de estado anterior cada vez que se ejecuta el intervalo.
Esta versión: setCount(count + 1) usa count cuando se ejecutó por última vez useEffect (en este caso 0, entonces 0+1). Debido a que hay una matriz de dependencias vacía, este enlace solo se ejecuta una vez.
Si count se incluyó en la matriz de dependencias de useEffect , se volvería a ejecutar cuando cambie el valor de count .
Ejecutar esto puede ayudar a ver qué está pasando:
React.useEffect(() => { console.log('running useEffect') const interval = setInterval(() => { setCount(count + 1); console.log('hello ', count); }, 500); return () => { console.log('clear interval') clearInterval(interval); } }, [count]);