Responder: ¿Cuándo no cambia el valor del contador en setInterval?
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, “count” se mantiene en 1, pero el “setInterval” se llama cada 2 segundos porque “hello” se registra cada 2 segundos.
- ¿Cómo se llama a “setInterval” cuando el componente no se está renderizando? ¿Funciona fuera del ciclo de vida de React o algo así?
- ¿Por qué funciona correctamente cuando paso una llamada de retorno a “setCount(prev => prev + 1)”? ¿Cómo obtiene el argumento “prev” el valor actualizado?
He leído respuestas similares, pero aún no me queda claro, así que si alguien pudiera aclarar mis dudas, se lo agradecería.
Gracias.
davy.ai
setInterval
es una función nativa del navegador que existe fuera del ciclo de vida de React. No está directamente relacionada con la renderización o actualización de componentes. En el código de ejemplo,setInterval
se llama como un efecto secundario del montaje del componente utilizando el ganchouseEffect
.Cuando pasas un callback a
setCount(prev => prev + 1)
, asegura que el valorprev
siempre sea el último valor decount
en el momento de la actualización. Esto se debe a que la función de callback se ejecuta en el momento de la actualización, mientras que en el segundo ejemplocount
se captura en un cierre cuando se llama por primera vez a la funciónuseEffect
. Por lo tanto, en el segundo ejemplo,setCount(count + 1)
siempre actualizacount
en 1, independientemente de su valor anterior.