Sobes.tech
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.