• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

115
Vistas
setting the state inside the useEffect with that state as a dependency

Let's say I have this code here:

const [a , setA] = useState(false);
useEffect(() => {
      setA(true);

    setTimeout(()=>{
      setA(false);
    },300);

},[a]);

I have two questions:

1) Will this create an infinte loop (if I'm using that same state as a dependency)?

2) If I set the state in the middle of the useEffect code the component re-render immediately, so when will the rest of the code execute if the component render before we get to it inside the useEffect? When will the setA(false) happen?

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

If you fix the syntax (setTimeOut needs to be spelled properly), yes, that'll cause an infinite loop.

const App = () => {
    console.log('rendering');
    const [a , setA] = React.useState(false);
    React.useEffect(() => {
          setA(true);

        setTimeout(()=>{
          setA(false);
        },300);

    },[a]);
    return 'foo';
};

ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

If I set the state in the middle of the useEffect code the component re-render immediately, so when will the rest of the code execute if the component render before we get to it inside the useEffect? When will the setA(false) happen?

It'll occur just as it was originally scheduled to - 300-ish milliseconds after the hook originally runs. When the component re-mounts, it will not cancel or change ongoing timeouts that previous renders might have created, unless you've specifically written code to handle that possibility.

  1. The component mounts or has setA called
  2. The component (re-)renders
  3. The effect hook runs
  4. If the effect hook eventually calls setTimeout, the timeout callback will run regardless, exactly at the time scheduled, no matter what other code there is - as long as you don't call clearTimeout. If you set state as well as calling setTimeout, that has no effect on the timeout. (which is an important thing to keep in mind - stale closures are a common problem people run into with React)
almost 3 years ago · Juan Pablo Isaza Denunciar

0

If I set the state in the middle of the useEffect code the component re-render immediately, so when will the rest of the code execute if the component render before we get to it inside the useEffect? When will the setA(false) happen?

No, It will not re-render the component in middle of useEffect even if you set the state. useState hook runs asynchronously. It will be queued.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda