Explique o ciclo de vida do React

Entender o ciclo de vida é crucial para performance e controle de efeitos colaterais. No React moderno (com Hooks), não pensamos mais tanto em "métodos de classe", mas sim na sincronização do componente com o estado e o DOM.

As Três Fases Principais

A. Montagem (Mounting)

É quando o componente nasce. Ele é transformado de código JavaScript em nós reais no DOM do navegador.

• No passado: Usava-se o componentDidMount.
• Hoje (Hooks): Usamos o useEffect com um array de dependências vazio []. É o momento ideal para chamadas de API ou configurar timers.

B. Atualização (Updating)

Ocorre sempre que há uma mudança nas Props ou no Estado. O React precisa decidir se a interface deve mudar.

• No passado: Usava-se componentDidUpdate.
• Hoje (Hooks): Usamos o useEffect passando variáveis no array de dependências [estado]. O efeito roda sempre que aquela variável mudar.

C. Desmontagem (Unmounting)

É quando o componente é removido do DOM (ex: o usuário trocou de página ou fechou um modal).

• No passado: Usava-se componentWillUnmount.
• Hoje (Hooks): Usamos a função de limpeza (cleanup) dentro do useEffect. É essencial para evitar "vazamentos de memória" (memory leaks), como limpar intervalos ou cancelar inscrições de eventos.

Exemplo Prático com useEffect

import React, { useState, useEffect } from 'react';

const Timer: React.FC = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // FASE DE MONTAGEM: O componente iniciou
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // FASE DE DESMONTAGEM: A função de limpeza (Cleanup)
    // Roda quando o componente sai da tela
    return () => {
      clearInterval(interval);
      console.log("Timer limpo para evitar memory leak.");
    };
  }, []); // Array vazio = Roda apenas na montagem

  return <div>Tempo decorrido: {seconds}s</div>;
};