Как связать WebSocket с React и обеспечить реактивное обновление интерфейса на основе событий сокета?

WebSocket — это протокол двусторонней связи между клиентом и сервером поверх одного TCP-соединения. В React его обычно открывают внутри useEffect, чтобы соединение создавалось после монтирования компонента и закрывалось при размонтировании. Само соединение хранят в useRef, чтобы не пересоздавать его при каждом рендере.

Базовая интеграция

Ключевая идея: сокет — это внешний источник событий, а React-состояние — единственный источник правды для UI. При получении сообщения вызываем setState, и React сам перерисует интерфейс.

function Chat() {
  const [messages, setMessages] = useState([]);
  const wsRef = useRef(null);

  useEffect(() => {
    const ws = new WebSocket('wss://example.com/chat');
    wsRef.current = ws;

    ws.onmessage = (e) => {
      const data = JSON.parse(e.data);
      setMessages(prev => [...prev, data]);
    };

    return () => ws.close();
  }, []);

  return <ul>{messages.map(m => <li key={m.id}>{m.text}</li>)}</ul>;
}

Реактивность и переподключение

• Обновляйте состояние через функциональный setState, чтобы не терять предыдущие сообщения.
• Для сложной логики используйте useReducer — это упрощает обработку разных типов событий.
• Добавьте переподключение с backoff-задержкой в onclose, иначе при обрыве связи UI перестанет обновляться.
• Отписывайтесь от событий и закрывайте сокет в cleanup-функции, чтобы избежать утечек.

Практический совет

Если сокет нужен в нескольких компонентах, вынесите его в отдельный хук useWebSocket или в контекст. Так логика соединения не дублируется, а компоненты остаются «глупыми» и просто читают данные из состояния.

Итог: связка WebSocket и React строится на useEffect для жизненного цикла соединения и useState/useReducer для реактивного обновления UI. Такой подход удобен для чатов, дашбордов, биржевых котировок и любых real-time интерфейсов.