useEffect: sincronizando com sistemas externos

useEffect não é "código que roda depois de renderizar" para qualquer tarefa. Ele existe para sincronizar um componente com algo fora do React: APIs do navegador, conexão, timer, biblioteca externa ou rede.

import { useEffect, useState } from 'react';

export default function OnlineTitle() {
  const [name, setName] = useState('Ada');

  useEffect(() => {
    const previousTitle = document.title;
    document.title = `Perfil de ${name}`;

    return () => {
      document.title = previousTitle;
    };
  }, [name]);

  return (
    <label>
      Nome
      <input value={name} onChange={(event) => setName(event.target.value)} />
    </label>
  );
}

O Effect lê name, então name aparece na lista de dependências. Se o valor mudar, React executa a limpeza do Effect anterior e sincroniza novamente.

• Effect: conecta React a um sistema externo.
• Dependências: dizem quais valores reativam aquela sincronização.
• Cleanup: desfaz a sincronização anterior quando necessário.

Dica: calcular fullName, filtrar uma lista ou responder a um clique normalmente não precisa de Effect. Faça isso na renderização ou no handler do evento.

No próximo nó, vamos usar Effect em um caso didático comum: buscar dados de uma API no cliente, tratando loading e erro.