es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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.

  1. ¿Cómo se llama a “setInterval” cuando el componente no se está renderizando? ¿Funciona fuera del ciclo de vida de React o algo así?
  2. ¿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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    1. 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 gancho useEffect.

    2. Cuando pasas un callback a setCount(prev => prev + 1), asegura que el valor prev siempre sea el último valor de count 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 ejemplo count se captura en un cierre cuando se llama por primera vez a la función useEffect. Por lo tanto, en el segundo ejemplo, setCount(count + 1) siempre actualiza count en 1, independientemente de su valor anterior.

Comments are closed.