Permítanme explicar el resultado de este código para preguntar mi problema fácilmente.
const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const handleName = e => { const { value } = e.target; setName(value); }; const handleUsername = e => { const { value } = e.target; setUsername(value); }; return ( <div> <div> <input value={name} onChange={handleName} /> <input value={username} onChange={handleUsername} /> </div> <div> <div> <span>{name}</span> </div> <div> <span>{username}</span> </div> </div> </div> ); }; Cuando se monta el ForExample component , se registrará el 'efecto'. Esto está relacionado con el componentDidMount() .
Y siempre que cambie la entrada de nombre, se registrarán tanto el 'efecto' como la 'limpieza'. Viceversa, no se registrará ningún mensaje cada vez que cambie la entrada del nombre de usuario desde que agregué [username] al segundo parámetro de useEffect() . Esto está relacionado con el componentDidUpdate()
Por último, cuando se desmonte el ForExample component ForExample, se registrará 'limpiado'. Esto está relacionado con el componentWillUnmount() .
Todos sabemos eso.
En resumen, se invoca 'limpiado' cada vez que se vuelve a renderizar el componente (incluye desmontar)
Si quiero hacer que este componente registre 'limpiado' solo en el momento en que se desmonta, solo tengo que cambiar el segundo parámetro de useEffect() a [] .
Pero si cambio [username] a [] , ForExample component ya no implementa el componentDidUpdate() para la entrada de nombre.
Lo que quiero hacer es que, para que el componente admita tanto el componentDidUpdate() solo para la entrada de nombre como el componentWillUnmount() . (registro 'limpiado' solo para el momento en que se desmonta el componente)
Puede usar más de un useEffect().
Por ejemplo, si mi variable es data1 , puedo usar todo esto en mi componente:
useEffect( () => console.log("mount"), [] ); useEffect( () => console.log("data1 update"), [ data1 ] ); useEffect( () => console.log("any update") ); useEffect( () => () => console.log("data1 update or unmount"), [ data1 ] ); useEffect( () => () => console.log("unmount"), [] );Dado que la limpieza no depende del nombre de username , puede colocar la limpieza en un useEffect separado que recibe una matriz vacía como segundo argumento.
Ejemplo
const { useState, useEffect } = React; const ForExample = () => { const [name, setName] = useState(""); const [username, setUsername] = useState(""); useEffect( () => { console.log("effect"); }, [username] ); useEffect(() => { return () => { console.log("cleaned up"); }; }, []); const handleName = e => { const { value } = e.target; setName(value); }; const handleUsername = e => { const { value } = e.target; setUsername(value); }; return ( <div> <div> <input value={name} onChange={handleName} /> <input value={username} onChange={handleUsername} /> </div> <div> <div> <span>{name}</span> </div> <div> <span>{username}</span> </div> </div> </div> ); }; function App() { const [shouldRender, setShouldRender] = useState(true); useEffect(() => { setTimeout(() => { setShouldRender(false); }, 5000); }, []); return shouldRender ? <ForExample /> : null; } ReactDOM.render(<App />, document.getElementById("root")); <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>Para agregar a la respuesta aceptada, tuve un problema similar y lo resolví usando un enfoque similar con el ejemplo artificial a continuación. En este caso, necesitaba registrar algunos parámetros en componentWillUnmount y, como se describe en la pregunta original, no quería que se registrara cada vez que cambiaban los parámetros.
const componentWillUnmount = useRef(false) // This is componentWillUnmount useEffect(() => { return () => { componentWillUnmount.current = true } }, []) useEffect(() => { return () => { // This line only evaluates to true after the componentWillUnmount happens if (componentWillUnmount.current) { console.log(params) } } }, [params]) // This dependency guarantees that when the componentWillUnmount fires it will log the latest params