This content originally appeared on DEV Community and was authored by Jonas Gabriel
Imagine que você está construindo um modelo LEGO.
Primeiro, você junta as peças (inicialização), depois começa a montar (renderização), faz ajustes conforme necessário (atualização) e, finalmente, se terminar ou mudar de modelo, desmonta tudo (desmontagem).
O ciclo de vida de um componente React funciona de forma semelhante!
O Ciclo de vida de um componente React
Os componentes React passam por três fases principais:
Montagem: Quando o componente é criado e inserido no DOM pela primeira vez.
Atualização: Quando as props ou o estado do componente mudam, ele é atualizado para refletir essas alterações.
Desmontagem: Quando um componente é removido do DOM.
Vamos detalhar cada etapa:
1. Montagem: "Construindo o modelo LEGO"
Quando um componente React é criado, as seguintes etapas acontecem:
constructor (opcional): Configura o estado inicial e vincula manipuladores de eventos.
render(): Descreve como a interface do usuário deve ser exibida.
useEffect (com array de dependências vazio): Executa após o componente ser montado, ideal para buscar dados ou se inscrever em serviços.
Exemplo:
import React, { useState, useEffect } from "react";
function Welcome() {
const [message, setMessage] = useState("");
useEffect(() => {
setMessage("Bem-vindo ao React!"); // Simula a busca de dados iniciais
}, []); // Executa apenas uma vez ao montar
return <h1>{message}</h1>;
}
2. Atualização: "Fazendo ajustes"
Os componentes React são atualizados quando:
O estado muda: Acionado por useState ou hooks similares.
As props mudam: Quando novos dados são passados de um componente pai.
Para otimizar as atualizações:
Use keys exclusivas em listas para ajudar o React a atualizar o DOM de forma eficiente.
Utilize hooks como useMemo e useCallback para evitar recálculos ou re-renderizações desnecessárias.
Exemplo:
import React, { useState, useCallback, useMemo } from "react";
function Counter() {
const [count, setCount] = useState(0);
const [otherState, setOtherState] = useState(false);
// Função incrementada com useCallback para evitar recriação em cada renderização
const increment = useCallback(
() => setCount((prevCount) => prevCount + 1),
[]
);
// Valor memoizado para simular um cálculo pesado
const expensiveCalculation = useMemo(() => {
console.log("Recalculando valor...");
return count * 2;
}, [count]);
return (
<div>
<p>Contador: {count}</p>
<p>Cálculo pesado (count * 2): {expensiveCalculation}</p>
<button onClick={increment}>Incrementar</button>
<button onClick={() => setOtherState(!otherState)}>
Alterar outro estado
</button>
</div>
);
}
export default Counter;
Explicação:
- useCallback:
- O increment é memoizado com useCallback, o que evita que ele seja recriado em cada renderização. Isso é útil ao passar a função como prop para componentes filhos, evitando renderizações desnecessárias.
- useMemo:
- A variável expensiveCalculation é calculada apenas quando o estado count muda, evitando cálculos desnecessários nas renderizações.
- Testando a otimização:
- Quando você clicar em "Alterar outro estado", verá que o cálculo pesado não será executado novamente, já que ele depende apenas de count.
3. Desmontagem: "Desmontando o modelo LEGO"
Quando um componente é removido do DOM, o React realiza uma limpeza para evitar vazamentos de memória. Você pode lidar com isso usando:
useEffect (com uma função de limpeza): Ideal para cancelar inscrições ou temporizadores.
Exemplo:
function Timer() {
useEffect(() => {
const interval = setInterval(() => {
console.log("Tick");
}, 1000);
return () => clearInterval(interval); // Limpeza ao desmontar
}, []);
return <p>Confira o console para os ticks!</p>;
}
Por que isso é importante?
Entender o ciclo de vida dos componentes React ajuda você a:
Escrever códigos eficientes e livres de bugs.
Otimizar o desempenho, evitando re-renderizações desnecessárias.
Gerenciar efeitos colaterais como chamadas de API e inscrições.
Dominando esses conceitos, você estará pronto para lidar com aplicações React complexas.
Resumo: Ciclo de vida do React em poucas palavras
Os componentes são montados (inicializados e renderizados).
Os componentes são atualizados (mudanças de props/estado).
Os componentes são desmontados (limpos e removidos).
Com hooks como useEffect, useCallback e useMemo, você tem as ferramentas para gerenciar cada fase de forma eficaz.
Bons códigos!
This content originally appeared on DEV Community and was authored by Jonas Gabriel
Jonas Gabriel | Sciencx (2025-01-15T13:00:34+00:00) Entendendo o Ciclo de Vida dos Componentes React. Retrieved from https://www.scien.cx/2025/01/15/entendendo-o-ciclo-de-vida-dos-componentes-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.