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

0

116
Vistas
establecer el estado dentro del useEffect con ese estado como una dependencia

Digamos que tengo este código aquí:

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

Tengo dos preguntas:

1) ¿Esto creará un bucle infinito (si estoy usando ese mismo estado como dependencia)?

2) Si configuro el estado en medio del código useEffect, el componente se vuelve a procesar inmediatamente, entonces, ¿cuándo se ejecutará el resto del código si el componente se procesa antes de que lleguemos a él dentro del useEffect? ¿Cuándo sucederá el setA(false) ?

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

0

Si corrige la sintaxis ( setTimeOut debe escribirse correctamente), sí, eso provocará un bucle infinito.

 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>

Si configuro el estado en medio del código useEffect, el componente se vuelve a procesar inmediatamente, entonces, ¿cuándo se ejecutará el resto del código si el componente se procesa antes de que lleguemos a él dentro del useEffect? ¿Cuándo sucederá el setA (falso)?

Ocurrirá tal como estaba programado originalmente: 300 milisegundos después de que se ejecute originalmente el gancho. Cuando el componente se vuelva a montar, no cancelará ni cambiará los tiempos de espera en curso que podrían haber creado los renderizados anteriores, a menos que haya escrito código específicamente para manejar esa posibilidad.

  1. El componente se monta o tiene setA llamado
  2. El componente (re)renderiza
  3. El gancho de efecto corre
  4. Si el gancho de efecto finalmente llama a setTimeout , la devolución de llamada de tiempo de espera se ejecutará independientemente, exactamente a la hora programada, sin importar qué otro código haya, siempre que no llame a clearTimeout . Si establece el estado además de llamar a setTimeout , eso no tiene efecto en el tiempo de espera. (que es algo importante a tener en cuenta: los cierres obsoletos son un problema común con el que se encuentran las personas con React)
about 3 years ago · Juan Pablo Isaza Denunciar

0

Si configuro el estado en medio del código useEffect, el componente se vuelve a procesar inmediatamente, entonces, ¿cuándo se ejecutará el resto del código si el componente se procesa antes de que lleguemos a él dentro del useEffect? ¿Cuándo sucederá el setA (falso)?

No, no volverá a procesar el componente en medio de useEffect incluso si configura el estado. El enlace useState se ejecuta de forma asíncrona. Estará en cola.

about 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