Neste artigo, falarei sobre o React Lifecycle e alguns dos métodos correspondentes. Vamos começar!

Os componentes do React passam por três fases principais:

Montagem: quando o componente se acoplou ao DOM, o nascimento do seu componente

Atualizando: quando seu componente está atualizando, seja por causa de novas props ou mudanças de estado

Desmontagem: quando o componente é removido do DOM, a morte do seu componente

Montagem

Começaremos com os métodos de ciclo de vida para a fase de montagem. O método de ciclo de vida mais comum é o render() porque os componentes de classe no React os exigem. render() faz exatamente o que parece e lida com a renderização do componente para a interface do usuário . Também pode ocorrer durante a fase de atualização. Uma coisa boa a saber é que você não pode definir o estado em uma renderização porque tem que ser uma função pura (uma função sem efeitos colaterais)!

componentDidMount() acontece quando, você adivinhou, o componente é montado e é chamado após o render() . Em outras palavras, no momento em que componentDidMount() é chamado, o componente já foi renderizado uma vez. Iniciar chamadas de API geralmente é feito em componentDidMount() porque evita re-renderização desnecessária. Mas por que você faria uma chamada de API após o render() ? Isso traz um bom ponto para dizer que os métodos do ciclo de vida do React são assíncronos, o que significa que o próximo método será executado imediatamente após o anterior, seja o anterior concluído ou não. Você pode definir o estado em componentDidMount()e enquanto isso causa uma renderização extra, o usuário não vê isso porque isso acontecerá antes que o navegador atualize a tela (embora possa causar alguns problemas de desempenho).

Atualizando

Como mencionei acima, render() também acontece na fase de atualização.

componentDidUpdate() é chamado imediatamente após a atualização. Esse método é comumente usado para atualizar o DOM com alterações de estado ou prop. Você pode definir o estado aqui, mas DEVE ser envolvido em uma condição, caso contrário, causará um loop infinito.

Desmontagem

componentWillUnmount() é chamado antes que o componente seja desmontado e removido do DOM. Esse método geralmente é usado para ações de limpeza (como invalidar cronômetros ou cancelar chamadas de API). Você não pode definir o estado em componentWillUnmount() porque uma vez que uma instância de componente é desmontada, ela não será montada novamente, portanto, não será renderizada novamente.

Se você é do tipo React Hooks como eu, o hook useEffect é como uma combinação de componentDidMount() , componentDidUpdate() e componentWillUnmount() .

Aqui está um diagrama de ciclo de vida super útil dos documentos do React! Espero que tenham gostado da leitura e até a próxima!