Ciclo de vida de componentes funcionais no React

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 curso

Montagem

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 curso

Observe 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>
    </>
  );
}

Formação Desenvolvedor React - Funcional

Conhecer a formação

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: