0Pricing
React Academy · Aula

Reconexão, tratamento de erros e limpeza

Trate desconexões de forma adequada e remova os ouvintes do socket em useEffect.

Reconexão, tratamento de erros e limpeza é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Por que a reconexão é importante

Interrupções de rede são comuns em dispositivos móveis. Sem lógica de reconexão, os usuários perdem sua conexão em tempo real sem perceber. Uma boa estratégia faz novas tentativas automaticamente com espera progressiva.

Reconexão automática do Socket.IO

O Socket.IO reconecta automaticamente por padrão. Configure reconnectionAttempts, reconnectionDelay e reconnectionDelayMax nas opções de io().

const socket = io('https://api.example.com', {
  reconnectionAttempts: 5,
  reconnectionDelay: 1000,       // initial delay
  reconnectionDelayMax: 10000,   // max delay (exponential backoff)
  randomizationFactor: 0.5,
});

Acompanhando o estado da conexão no React

Ouça os eventos connect, disconnect e connect_error e reflita o estado na condição do componente.

function useConnectionStatus() {
  const [status, setStatus] = useState<'connected' | 'disconnected' | 'error'>(
    socket.connected ? 'connected' : 'disconnected'
  );

  useEffect(() => {
    socket.on('connect', () => setStatus('connected'));
    socket.on('disconnect', () => setStatus('disconnected'));
    socket.on('connect_error', () => setStatus('error'));
    return () => {
      socket.off('connect');
      socket.off('disconnect');
      socket.off('connect_error');
    };
  }, []);

  return status;
}

Exibindo uma faixa de reconexão

Exiba uma faixa quando o socket se desconectar para que os usuários saibam que estão offline e que a reconexão está em andamento.

function ConnectionBanner() {
  const status = useConnectionStatus();
  if (status === 'connected') return null;
  return (
    <div className="banner warning">
      {status === 'error' ? 'Connection failed' : 'Reconnecting...'}
    </div>
  );
}

Reconexão manual

Depois que as tentativas forem esgotadas, permita que os usuários iniciem uma reconexão manual por meio de um botão.

const [failed, setFailed] = useState(false);

socket.on('reconnect_failed', () => setFailed(true));

if (failed) {
  return (
    <button onClick={() => { setFailed(false); socket.connect(); }}>
      Retry connection
    </button>
  );
}

Reconexão com WebSocket bruto

O WebSocket bruto não tem reconexão integrada. Implemente manualmente uma espera progressiva: ao fechar, aguarde Math.min(delay * 2, maxDelay) antes de tentar uma nova conexão.

function connectWithBackoff(url, attempt = 0) {
  const ws = new WebSocket(url);
  ws.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt, 30000);
    setTimeout(() => connectWithBackoff(url, attempt + 1), delay);
  };
  return ws;
}

Limpeza em useEffect

Todo ouvinte de socket adicionado em um useEffect deve ser removido na função de limpeza. Não fazer isso causa vazamentos de memória e tratamento duplicado de eventos.

useEffect(() => {
  const onData = (d) => setState(d);
  socket.on('data', onData);

  return () => {
    socket.off('data', onData); // remove specific handler reference
  };
}, []);

Evitando fechamentos obsoletos nos manipuladores

Quando um manipulador de socket referencia o estado ou as propriedades, ele captura um fechamento obsoleto. Use uma referência para acessar sempre o valor mais recente.

const handlerRef = useRef(null);
handlerRef.current = (msg) => updateMessages(messages, msg); // fresh ref each render

useEffect(() => {
  const onMsg = (...args) => handlerRef.current(...args);
  socket.on('message', onMsg);
  return () => socket.off('message', onMsg);
}, []); // no deps needed

Esvaziando mensagens pendentes após a reconexão

Coloque as mensagens de saída em uma fila enquanto estiver desconectado e esvazie a fila quando a conexão for restabelecida.

const queue = useRef<string[]>([]);

socket.on('connect', () => {
  while (queue.current.length) {
    socket.emit('message', queue.current.shift());
  }
});

function send(text: string) {
  if (socket.connected) socket.emit('message', text);
  else queue.current.push(text);
}

Entrando novamente nas salas após a reconexão

O Socket.IO limpa as associações às salas durante a desconexão. Entre novamente nas salas quando o socket se reconectar para restaurar as inscrições.

useEffect(() => {
  function rejoin() { socket.emit('join-room', roomId); }
  socket.on('connect', rejoin);
  return () => socket.off('connect', rejoin);
}, [roomId]);

Tratamento global de erros

Trate os erros irrecuperáveis de forma adequada: mostre uma interface de erro e ofereça o recarregamento da página como último recurso.

socket.on('connect_error', (err) => {
  console.error('Socket error:', err.message);
  // Show user-friendly error
});

Verificação rápida

Qual é o risco de não remover um ouvinte de eventos do socket na limpeza do useEffect?

Recapitulação

Configure a reconexão do Socket.IO com opções de espera progressiva. Reflita o estado da conexão no estado do React, mostre uma faixa de reconexão, entre novamente nas salas após a reconexão e sempre remova os ouvintes na limpeza do useEffect. Coloque as mensagens pendentes em uma fila enquanto estiver offline e esvazie-a após a reconexão.

Perguntas Frequentes

A aula “Reconexão, tratamento de erros e limpeza” é grátis?

Sim — o texto completo de “Reconexão, tratamento de erros e limpeza” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Reconexão, tratamento de erros e limpeza”?

Trate desconexões de forma adequada e remova os ouvintes do socket em useEffect. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Reconexão, tratamento de erros e limpeza”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Fundamentos de WebSocket no navegador
  2. Usando Socket.IO com React
  3. Criando um componente de chat em tempo real
  4. Reconexão, tratamento de erros e limpeza
← Voltar para React Academy