Middle
¿Qué métodos del ciclo de vida existen en React y cómo emularlos con useEffect?
sobes.tech AI
Respuesta de la IA
En un componente de clase de React, hay varios métodos del ciclo de vida, entre los cuales:
componentDidMount— se llama después de montar el componente;componentDidUpdate— se llama después de actualizar el componente;componentWillUnmount— se llama antes de desmontar el componente.
En componentes funcionales con el hook useEffect, estos métodos se pueden emular de la siguiente manera:
import React, { useEffect } from 'react';
function MyComponent(props) {
// componentDidMount
useEffect(() => {
// código que se ejecuta una vez después de montar
console.log('Mounted');
}, []); // matriz de dependencias vacía
// componentDidUpdate
useEffect(() => {
// código que se ejecuta al cambiar props o estado
console.log('Updated');
}); // sin segundo argumento — se llama después de cada renderizado
// componentWillUnmount
useEffect(() => {
return () => {
// código de limpieza antes de desmontar
console.log('Unmounted');
};
}, []);
return <div>{props.value}</div>;
}
De esta forma, useEffect con una matriz de dependencias vacía emula componentDidMount y componentWillUnmount (a través de la función de limpieza), y useEffect sin segundo argumento — componentDidUpdate.