1

El return del useEffect se ejecuta cuando el componente se desmonta, pero mi pregunta es: ¿qué componente? : ¿el componente donde está declarado useEffect?, ¿el componente hijo?, ...

Dos ejemplos:

  1. En este artículo declara el useEffect con su return, en el componente hijo "Simple", y cuando se ejecuta el return del useEffect, es ese componente "Simple" donde está definido el useEffect y su return, el que se desmonta.

  2. En este otro código, declara el useEffect y su return en el componente padre , y sin embargo el componente que se desmonta al ejecutarse el return de dicho useEffect es el componente hijo .

Componente padre "RelojHooks":

import { useState, useEffect } from 'react';
import Reloj from './Reloj';


export default function RelojHooks() {

    const [hora, setHora] = useState(new Date().toLocaleTimeString());
    const [visible, setVisible] = useState(false);

    useEffect(() => {

        let temporizador;

        // ACTUALIZACION: componentDidUpdate
        // Si está visible el Componente Reloj: actualizar cada segundo su hora.
        if (visible) {
            temporizador = setInterval(() => setHora(new Date().toLocaleTimeString()), 1000);
        }
        
        // DESMONTAJE: componentWillUnmount
        // Todo lo que esté en esta función de DESMONTAJE, es lo que se va a ejecutar cuando el Componente se desmonte.
        return () => clearInterval(temporizador);

    }, [visible]);


    return (
        <>
            <h2>Reloj con Hooks</h2>
            {visible && <Reloj hora={hora} />}
            <button onClick={() => setVisible(true)}>iniciar</button>
            <button onClick={() => setVisible(false)}>detener</button>
        </>
    );
}

Componente hijo "Reloj":

export default function Reloj({ hora }) {
    return (
        <h3>{hora}</h3>
    );
}

2 respuestas 2

0

respondiendo a:

El return del useEffect se ejecuta cuando el componente se desmonta, pero mi pregunta es: ¿qué componente?

El return o callback de limpieza del useEffect siempre debe estar en el componente que se quiere limpiar. Puede ver más detalles acá.

En el ejemplo 1 el cleanup se encontraba en el componente <Simple /> ya que a modo de ejemplo se simulaba que algo en ese scope se debe limpiar (tiene un console.log solo para efectos de prueba).

En el ejemplo 2 el cleanup si es algo más a la realidad donde el componente "padre" RelojHook es quien tiene la lógica para el temporizador (setInterval) y es quien se debe encargar de limpiar solo cuando se desmonte el mismo.

7
  • Gracias vicasas por tu respuesta. Algo me ha aclarado, pero no del todo. Me dices que useEffect tiene que declararse en el componente que quiere hacer la limpieza: de acuerdo. Pero me dices también que en el ejemplo 2, se hará la limpieza cuando se desmonte el componente, pero en realidad RelojHook NO se desmonta, el que se desmonta es su hijo Reloj. Commented el 12 abr. 2022 a las 13:32
  • Cuando se desmonta el componente Reloj no hace más que desmontarse pero sin ejecutar nada, por qué dentro de él no existe un cleanup explícitamente. En cambio en el RelojHook cuando él se desmonte si va a ejecutar cleanup para si mismo, cosa que tiene sentido, ya que como mencione esté es quién tiene la lógica o función (setInterval) que se necesita limpiar.
    – vicasas
    Commented el 12 abr. 2022 a las 13:56
  • Sí, entiendo la explicación que me das. Pero también dices: "En cambio en el RelojHook cuando él se desmonte si va a ejecutar cleanup para si mismo". Y ahí está el asunto: o sea que el cleanup de RelojHook se llama está claro, pero yo pregunto por qué no se desmonta RelojHook cuando se llama su cleanup. Porque el unico que se desmonta es su componente hijo Reloj. /// Desmontar = Unmount = componentDidUnmount = entiendo que es que el componente ya no se renderiza. Commented el 12 abr. 2022 a las 14:16
  • Y si esa definición que he dado es correcta, te aseguro que el componente RelojHook NO se desmonta ya que sigue siendo renderizado aunque su función cleanup en el return de useEffect se llame. Commented el 12 abr. 2022 a las 14:16
  • Se ejecuta por qué en las dependencias de useEffect está el estado de visible entonces cada vez que éste estado se actualice se va a ejecutar el useEffect. Esto responde a tu pregunta?
    – vicasas
    Commented el 12 abr. 2022 a las 14:42
0

En este otro código, declara el useEffect y su return en el componente padre , y sin embargo el componente que se desmonta al ejecutarse el return de dicho useEffect es el componente hijo 

Si observamos con atención, el componente hijo no se "renderiza" porque la condición no se cumple en el re-render que dispara el evento detener:

//visible es false al dar click en detener
//de acuerdo a esta lógica no pasa a && <Reloj>
//no va a renderizar Reloj
{visible && <Reloj hora={hora} />}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.