Sobes.tech
Middle

Quais métodos de ciclo de vida existem no React e como emulá-los com useEffect?

sobes.tech IA

Resposta da IA

Num componente de classe React, existem vários métodos do ciclo de vida, sendo os principais:

  • componentDidMount — chamado após montar o componente;
  • componentDidUpdate — chamado após atualizar o componente;
  • componentWillUnmount — chamado antes de desmontar o componente.

Em componentes funcionais com o hook useEffect, esses métodos podem ser emulados da seguinte forma:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // código que será executado uma vez após montar
    console.log('Mounted');
  }, []); // array de dependências vazio

  // componentDidUpdate
  useEffect(() => {
    // código que será executado ao alterar props ou estado
    console.log('Updated');
  }); // sem segundo argumento — chamado após cada renderização

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // código de limpeza antes de desmontar
      console.log('Unmounted');
    };
  }, []);

  return <div>{props.value}</div>;
}

Dessa forma, useEffect com array de dependências vazio emula componentDidMount e componentWillUnmount (por meio da função de limpeza), e useEffect sem segundo argumento — componentDidUpdate.