📊 Capítulo 04: useEffect & Cleanup Functions

Especialização em Frontend com React

🗺️ O Ciclo de Vida do useEffect e a Limpeza Obrigatória (Cleanup)

sequenceDiagram
    autonumber
    actor C as Componente
    participant E as useEffect Callback
    participant CL as Cleanup Function
    participant DOM as Browser DOM / WebSockets

    C->>E: Executa após renderização com dependência [userId]
    E->>DOM: Conecta WebSocket / Adiciona Listener
    Note over C,DOM: userId muda de 1 para 2
    C->>CL: Executa Cleanup Function anterior!
    CL->>DOM: Fecha WebSocket antigo / Remove Listener
    C->>E: Executa novo useEffect para userId = 2!
    Note over C: Componente desmonta
    C->>CL: Executa Cleanup final para liberar memória!

🎯 Slide 1: Quando Usar e Quando NÃO Usar useEffect

• NÃO use para: Calcular valores a partir de props ou outro estado (use variáveis normais ou useMemo).

• USE para: Sincronizar o componente com sistemas externos fora do React (APIs de terceiros, WebSockets, listeners no window, timers).

🎯 Slide 2: A Função de Limpeza (Cleanup)

useEffect(() => {
  const ws = new WebSocket(`wss://api.empresa.com/feed/${id}`);
  ws.onmessage = (e) => setNoticias(JSON.parse(e.data));

  return () => {
    ws.close(); // Cleanup obrigatório para evitar vazamento de conexões!
  };
}, [id]);

🎯 Slide 3: O Strict Mode e a Montagem Dupla

• Em desenvolvimento, o React monta, desmonta e remonta componentes de propósito para testar se suas funções de limpeza estão funcionando perfeitamente!