ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount — e os hooks que transformaram essa lógica em useEffect. Entenda o que acontece nos bastidores de cada componente React.
Por que componentes que funcionam isoladamente quebram quando integrados?
Um componente React que exibe dados de uma API funciona perfeitamente no teste local. Em produção, ele é montado e desmontado conforme o usuário navega. Se o código não gerencia o ciclo de vida corretamente, uma requisição assíncrona pode tentar atualizar um componente que já foi removido do DOM — gerando o temido erro Can't perform a React state update on an unmounted component. Isso não é bug de sintaxe. É falta de controle do ciclo de vida.
Entender quando um componente nasce, quando atualiza e quando morre no React não é detalhe avançado — é o fundamento que separa interfaces que não vazam memória daquelas que degradam progressivamente em produção.
componentWillUnmount adequado pode consumir memória indefinidamente.Como o ciclo de vida funciona em três fases distintas?
Todo componente React passa por três fases durante sua existência no Virtual DOM. Cada fase tem métodos específicos para executar código no momento exato necessário — seja para buscar dados, reagir a mudanças ou limpar recursos.
componentDidMount
Executado uma vez logo após o componente ser inserido no DOM. Momento ideal para buscar dados de APIs, inicializar subscriptions e configurar timers.
componentDidUpdate
Executado após cada re-render causado por mudança em state ou props. Comparar estado anterior com atual evita loops infinitos de atualização.
componentWillUnmount
Executado antes de o componente ser removido do DOM. Essencial para cancelar timers, remover event listeners e desconectar subscriptions — evitar memory leaks.
Conjunto de métodos executados em fases específicas da existência de um componente: montagem (inserção no DOM), atualização (mudança em state/props) e desmontagem (remoção do DOM). Controla quando efeitos colaterais são disparados e limpos.
Como mapear os métodos de classe para hooks modernos?
| FASE | COMPONENTE DE CLASSE | HOOK EQUIVALENTE | QUANDO EXECUTAR |
|---|---|---|---|
| Montagem | componentDidMount() | useEffect(() => {}, []) | Uma vez, após inserção no DOM — buscar dados, inicializar |
| Atualização | componentDidUpdate(prevProps, prevState) | useEffect(() => {}, [dep]) | Quando dependência específica muda — sincronizar dados externos |
| Desmontagem | componentWillUnmount() | useEffect(() => { return () => {} }, []) | Antes da remoção do DOM — cancelar timers, remover listeners |
| Toda renderização | componentDidUpdate() sem comparação | useEffect(() => {}) | Após cada render — usar com cuidado, risco de loop infinito |
Como implementar o ciclo de vida no projeto UserTracker?
UserList.js — componente com os três métodos de ciclo de vida
import React, { Component } from 'react';
class UserList extends Component {
constructor(props) {
super(props);
this.state = { users: [] }; // lista vazia na inicialização
}
// FASE 1 — MONTAGEM: executado uma vez após inserção no DOM
componentDidMount() {
this.setState({ users: ['Alice', 'Bob', 'Charlie'] });
}
// FASE 2 — ATUALIZAÇÃO: executado após cada mudança de state/props
componentDidUpdate(prevProps, prevState) {
if (prevState.users !== this.state.users) {
console.log('Usuários atualizados:', this.state.users);
}
}
// FASE 3 — DESMONTAGEM: executado antes da remoção do DOM
componentWillUnmount() {
console.log('Desmontando componente, limpando dados...');
}
render() {
return (
<div>
<h1>Usuários Online:</h1>
<ul>
{this.state.users.map((user, index) => (
<li key={index}>{user}</li>
))}
</ul>
</div>
);
}
}
export default UserList;Equivalente moderno com useEffect
import { useState, useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
// componentDidMount: [] = executa apenas uma vez
setUsers(['Alice', 'Bob', 'Charlie']);
// componentWillUnmount: função de cleanup retornada
return () => {
console.log('Desmontando, limpando dados...');
};
}, []); // ← array vazio = executa só na montagem
// componentDidUpdate: [users] = executa quando users muda
useEffect(() => {
console.log('Usuários atualizados:', users);
}, [users]);
return (
<ul>
{users.map((u, i) => <li key={i}>{u}</li>)}
</ul>
);
}[] executa apenas na montagem (equivalente ao componentDidMount). Array com variáveis [dep] executa quando qualquer dependência muda. O return de cleanup é executado antes da desmontagem e antes de cada reexecução do efeito.Como esse conhecimento aparece no projeto UserTracker?
Painel de monitoramento de usuários em tempo real
O projeto simula um painel que monitora usuários online. O ciclo de vida controla exatamente o que acontece em cada fase:
- componentDidMount: ao montar, carrega a lista inicial — simula conexão com servidor.
- componentDidUpdate: ao atualizar, registra a mudança no console — em produção, sincronizaria com WebSocket.
- componentWillUnmount: ao desmontar, limpa dados e simula desconexão — previne memory leak se o usuário navegar para outra página.
De aula de ciclo de vida a ativo pedagógico e profissional
Evoluir UserTracker para buscar dados reais de uma API pública (JSONPlaceholder, GitHub Users). Adicionar WebSocket para atualização em tempo real com useEffect.
Artigo “Os 3 erros de ciclo de vida que todo dev React comete no primeiro emprego” — memory leaks, loops infinitos e cleanup incompleto.
Projeto integrado: painel de monitoramento do laboratório de informática — quais computadores estão em uso, timers de uso, alertas por tempo máximo.
Oficina: como ensinar ciclo de vida sem servidor — simular fases com setTimeout e console.log visível no browser DevTools em tempo real.
Perguntas frequentes sobre ciclo de vida no React
Acesse todos os materiais do Curso Técnico
Slides, roteiros de projeto, hooks avançados e reflexões sobre ensino de React na escola pública.
→ professorcomia.com.brCiclo de vida como consciência do tempo em interfaces reativas
Dominar o ciclo de vida não é memorizar nomes de métodos — é internalizar que componentes React são entidades temporárias que existem, mudam e morrem. O desenvolvedor que entende esse ciclo escreve código que não vaza memória, não dispara efeitos acidentais e não quebra quando o usuário navega de forma inesperada. É o que separa uma interface que funciona no protótipo de uma que sobrevive aos usuários reais.
>_ slides da aula
[SIS]ANO2C3B2S8A2 · componentes e ciclo de vida no react · 2º ano · semana 8 · aula 2