Building Real-Time Web Apps with React 19 and WebSockets

The Flaw of Component-Coupled WebSockets in Modern React

Most tutorials illustrate real-time communication by instantiating a `new WebSocket()` inside a component's `useEffect`. In high-throughput, multi-user products, this pattern breaks immediately. Component unmounts trigger premature socket closures, StrictMode doubles connection handshakes, and rapid incoming messages trigger render storms that degrade Main Thread performance.

When building low-latency ordering interfaces like [Restaurant OS](/projects/4), WebSocket lifecycles must exist independently of UI render phases. The frontend connection should act as an autonomous event emitter, while React 19 components subscribe purely to localized slices of that stream.

Decoupling Socket Streams with useSyncExternalStore

Rather than storing real-time messages directly in `useState`, isolate your WebSocket client inside an external store and expose a subscription interface that React 19 consumes via `useSyncExternalStore`. This eliminates tearing and prevents unnecessary parent re-renders.

import { useSyncExternalStore } from 'react';

type OrderEvent = { id: string; status: 'pending' | 'preparing' | 'delivered' };

class RealtimeStore {
  private socket: WebSocket | null = null;
  private state: OrderEvent[] = [];
  private listeners = new Set<() => void>();

  constructor(private url: string) {}

  connect() {
    if (this.socket) return;
    this.socket = new WebSocket(this.url);

    this.socket.onmessage = (event) => {
      const payload: OrderEvent = JSON.parse(event.data);
      this.state = [...this.state.filter(o => o.id !== payload.id), payload];
      this.listeners.forEach(notify => notify());
    };

    this.socket.onclose = () => {
      this.socket = null;
      setTimeout(() => this.connect(), 3000); // Backoff reconnect
    };
  }

  subscribe = (listener: () => void) => {
    this.listeners.add(listener);
    if (this.listeners.size === 1) this.connect();

    return () => {
      this.listeners.delete(listener);
      if (this.listeners.size === 0 && this.socket) {
        this.socket.close();
        this.socket = null;
      }
    };
  };

  getSnapshot = () => this.state;
}

export const orderStore = new RealtimeStore(process.env.NEXT_PUBLIC_WS_ENDPOINT!);

export function useLiveOrders() {
  return useSyncExternalStore(
    orderStore.subscribe,
    orderStore.getSnapshot,
    () => [] // Server snapshot for SSR
  );
}

Zero-Latency Interactions with React 19 useOptimistic

Waiting for a WebSocket round-trip before updating the UI creates perceptible input lag. React 19 introduces native optimistic updates via the `useOptimistic` hook, which perfectly complements bidirectional messaging. It allows instant UI updates while waiting for confirmation from the server.

import { useOptimistic, useTransition } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

type Message = { id: string; text: string; pending?: boolean };

export function LiveChatBox({ initialMessages }: { initialMessages: Message[] }) {
  const [, startTransition] = useTransition();
  const [optimisticMessages, setOptimistic] = useOptimistic(
    initialMessages,
    (state, newMessage: Message) => [...state, newMessage]
  );

  const handleSendMessage = (text: string) => {
    const tempId = crypto.randomUUID();
    const optimisticPayload: Message = { id: tempId, text, pending: true };

    startTransition(async () => {
      setOptimistic(optimisticPayload);
      
      // Broadcast event via Supabase Realtime channel
      const channel = supabase.channel('room-1');
      await channel.send({
        type: 'broadcast',
        event: 'message',
        payload: { id: tempId, text }
      });
    });
  };

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-2">
        {optimisticMessages.map((msg) => (
          <div key={msg.id} className={msg.pending ? 'opacity-50' : 'opacity-100'}>
            {msg.text}
          </div>
        ))}
      </div>
      <button onClick={() => handleSendMessage('Table 4 requested check')}>
        Send Update
      </button>
    </div>
  );
}

Handling Scale: Supabase Realtime vs Dedicated Sockets

For platforms handling transactional consistency alongside real-time updates—such as asset tracking in [Aura Estate](/projects/15)—managing custom Redis Pub/Sub clusters with raw Socket.io introduces substantial DevOps overhead. Supabase Realtime bridges this gap by offering three distinct transmission modes:

• Postgres Changes (CDC): Automatically emits inserts, updates, and deletes straight from the database write-ahead log (WAL) with Row-Level Security (RLS) enforcement.
• Broadcast Channels: Ephemeral low-latency peer-to-peer pub/sub ideal for live cursors, typing indicators, and optimistic action sync.
• Presence Tracking: Cluster-synchronized client presence tracking that handles disconnects and state synchronizations automatically.

Defensive Architecture: Reconnections, Backoff, and Deduplication

Production real-time applications must assume that connections will fail constantly—whether due to unstable mobile networks, sleep states, or load balancer cycling. To prevent data corruption, adhere to these three rules:

• Idempotent Mutation Keys: Always assign client-generated UUIDs to incoming messages so reconnecting clients discard already-processed frames.
• Exponential Backoff with Jitter: Avoid thundering herd problems on your socket servers by randomizing reconnection retry intervals.
• Heartbeat Ping-Pong: Rely on TCP-level health checks or application-level ping-pongs every 30 seconds to terminate dead half-open sockets.

Need Help Implementing Real-Time Architecture in Your Product?

Whether you are building an order dispatch system, a multi-tenant SaaS dashboard, or a live collaborative workspace, building scalable real-time systems requires battle-tested engineering. Explore my [Full-Stack Web Development Services](/services) or [get in touch for an architectural consultation](/contact).