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:
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.
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>
);
}