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.