• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

277
Views
reaccionar engancha la limpieza useEffect() solo para componenteWillUnmount?

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)

about 3 years ago · Santiago Trujillo
3 answers
Answer question

0

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"), [] );
about 3 years ago · Santiago Trujillo Report

0

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>

about 3 years ago · Santiago Trujillo Report

0

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
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error