O Ciclo de vida de componentes funcionais no React é um conjunto de funções de ciclo de vida que são automaticamente chamadas pelo React quando um componente é criado, atualizado ou removido da página.
Essas funções permitem que os desenvolvedores escrevam uma lógica personalizada para lidar com os eventos específicos no ciclo de vida do componente, como inicialização, renderização e limpeza. Entender e saber utilizar é importante para escrever componentes reutilizáveis, performáticos e manuteníveis.
Então, neste artigo, vamos ver como funciona as três etapas do ciclo de vida que é a montagem, atualização e desmontagem.
Curso JavaScript - Fundamentos
Conhecer o cursoMontagem
A montagem é um dos estágios do ciclo de vida de um componente React. Quando um componente é criado e adicionado à árvore de componentes, ele é “montado” e seus métodos de ciclo de vida são executados.
Veja o exemplo abaixo:
import { useEffect } from 'react';
function MyComponent(){
// Método de montagem
useEffect(() => {
console.log('Componente montado e pronto para ser renderizado.');
}, []);
return <p>My component</p>
}
No exemplo acima, o hook useEffect é usado para demonstrar como podemos executar instruções durante o ciclo.
O useEffect recebe uma função como primeiro argumento e um array de dependências como segundo argumento. A função passada será executada quando o componente for montado na tela (adicionado à árvore de componentes).
Isso quer dizer que assim que o componente for montado na tela, ele executará o console.log(“…“) que está dentro da função passada ao useEffect. Como o array de dependências está vazio ([]), a função será executada apenas uma vez, durante a montagem do componente.
Atualização
Essa etapa acontece quando o estado ou as propriedades do componente é atualizado.
Vejá o exemplo abaixo:
import { useEffect, useState } from 'react';
function MyComponent(){
const [count, setCount] = useState(0);
// Método de montagem
useEffect(() => {
console.log('Componente montado e pronto para ser renderizado.');
}, []);
// Método de atualização
useEffect(() => {
console.log('Componente atualizado.');
}, [count]);
return (
<>
<h1>Contador: {count}</h1>
<button onClick={() => setCount(count + 1)}>Incrementar</button>
</>
);
}
Curso React - Fundamentos
Conhecer o cursoObserve que no ciclo de atualização existe um array de dependências que está recebendo o valor count.
Isso vai dizer ao React para ele re-executar o bloco de instruções, do useEffect, sempre que o count tiver alguma alteração. Salientar que você consegue passar múltiplos valores que devem refletir na re-execução do bloco de instruções.
const [count, setCount] = useState(0);
const [value, setValue] = useState({});
const [name, setName] = useState('');
useEffect(() => {
console.log('Componente atualizado.');
}, [count, value, name]);
Sempre que tiver alguma alteração em um dos valores, count, value e name o ciclo de atualização será executado.
Desmontagem
A desmontagem é quando o componente é destruído (removido da árvore de componentes). Ele é o último ciclo de vida, então será executado somente uma vez.
import { useEffect, useState } from 'react';
function MyComponent(){
const [count, setCount] = useState(0);
// Método de montagem
useEffect(() => {
console.log('Componente montado e pronto para ser renderizado.');
}, []);
// Método de atualização
useEffect(() => {
console.log('Componente atualizado.');
}, [count]);
// Método de desmontágem
useEffect(() => {
console.log('Componente montado e pronto para ser renderizado.');
return () => {
console.log('Desmontando componente.');
};
}, []);
return (
<>
<h1>Contador: {count}</h1>
<button onClick={() => setCount(count + 1)}>Incrementar</button>
</>
);
}
Aqui temos um caso em particular, para você executar alguma instrução no ciclo de desmontagem é necessário executar o return dentro do useEffect e retornar uma função anônima. Essa função é quem será executada após a destruição do componente.
O mesmo useEffect pode ser utilizado para executar todo o ciclo de vida.
Observe o exemplo abaixo:
import { useEffect, useState } from 'react';
function MyComponent(){
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Componente montado e pronto para ser renderizado.');
return () => {
console.log('Desmontando componente.');
};
}, [count]);
return (
<>
<h1>Contador: {count}</h1>
<button onClick={() => setCount(count + 1)}>Incrementar</button>
</>
);
}
A partir do momento que eu tenho o useEffect, no componente, automaticamente estou executando o ciclo de montagem do componente.
Como estou passando no array de dependências o count, ele, também, vai acabar executando o ciclo de atualização. E, por fim, como estou retornando uma função anônima ele, também, irá executar o ciclo de desmontágem.
Conclusão
Concluindo, o ciclo de vida de componentes funcionais no React é uma parte fundamental da biblioteca e permite que os desenvolvedores escrevam lógicas personalizadas para lidar com eventos específicos no ciclo de vida do componente, tais como inicialização, renderização e limpeza.
Sei que você gostou deste artigo e tenho certeza de que a formação para Desenvolvedor React Funcional irá ajudá-lo a se tornar um desenvolvedor muito melhor. São 14h17 de video com muito conteúdo e um total de 59 exercícios.
Veja quais são os cursos que fazem parte desta formação:
