Cross-Tab State Synchronization in React: BroadcastChannel, Web Locks, and Leader Election

Modern web application power users rarely browse within a single isolated tab. Whether managing cloud infrastructure, triaging support tickets, trading assets, or editing e-commerce catalogs, users routinely keep three, five, or ten tabs of the same application open simultaneously.

This common multi-window usage exposes severe synchronization flaws in standard React architectures. When a user logs out in Tab A, Tabs B and C remain logged in, leaking sensitive data or erroring on next interaction. When an item is added to a shopping cart or an active workspace is switched in one tab, background tabs display stale information. Furthermore, if every open tab initiates its own background polling loop or WebSocket connection, backend infrastructure is subjected to a 5x to 10x traffic multiplier.

In this deep dive, we explore how to architect production-grade cross-tab synchronization in React: building a low-latency pub/sub bus with the BroadcastChannel API, subscribing to multi-window state without tearing using useSyncExternalStore, and coordinating shared background tasks using the Web Locks API for leader election.

---

Evaluating Multi-Tab Transport Layers

Historically, coordinating state between browser tabs relied on clunky workarounds:

1. The localStorage Storage Event: Listening to window.addEventListener('storage', ...) allows inter-tab communication, but it requires continuous string serialization, does not fire in the originating tab, and is vulnerable to storage quota exhaustion.
2. Server-Routed WebSockets: Routing messages through a remote backend server adds unnecessary network latency, incurs server egress costs, and fails entirely if the user loses external internet connectivity.

The Modern Standard: BroadcastChannel API

The Broadcast Channel API establishes a high-performance, same-origin pub/sub message bus directly inside the browser. Any browsing context—including browser tabs, windows, iframes, and Web Workers—can join a named channel:

• Zero Network Latency: Messages travel directly in-memory between OS processes on the client machine.
• Structured Cloning: Supports sending complex JavaScript objects, Arrays, TypedArrays, Maps, Sets, and binary Blobs directly without JSON.stringify().
• Origin Isolation: Communications are strictly partitioned by the browser's Same-Origin Policy (protocol, domain, and port).

---

Tearing-Free Cross-Tab State with useSyncExternalStore

To synchronize state across tabs in React without race conditions or visual tearing, external channel events must integrate cleanly with React's concurrent rendering pipeline.

Using useSyncExternalStore, we can build a resilient useCrossTabState hook:

import { useSyncExternalStore, useCallback, useRef, useEffect } from 'react';

export function useCrossTabState<T>(channelName: string, initialState: T) {
  const channelRef = useRef<BroadcastChannel | null>(null);
  const stateRef = useRef<T>(initialState);
  const listenersRef = useRef(new Set<() => void>());

  // Lazily initialize the BroadcastChannel
  if (!channelRef.current && typeof window !== 'undefined') {
    channelRef.current = new BroadcastChannel(channelName);
    channelRef.current.onmessage = (event: MessageEvent<T>) => {
      stateRef.current = event.data;
      listenersRef.current.forEach((listener) => listener());
    };
  }

  // Subscribe callback conforming to useSyncExternalStore
  const subscribe = useCallback((callback: () => void) => {
    listenersRef.current.add(callback);
    return () => {
      listenersRef.current.delete(callback);
    };
  }, []);

  const getSnapshot = useCallback(() => stateRef.current, []);

  const currentState = useSyncExternalStore(subscribe, getSnapshot, () => initialState);

  const setState = useCallback(
    (newState: T | ((prev: T) => T)) => {
      const resolvedState =
        typeof newState === 'function'
          ? (newState as (prev: T) => T)(stateRef.current)
          : newState;

      stateRef.current = resolvedState;
      // Broadcast state update to all other open tabs
      channelRef.current?.postMessage(resolvedState);
      // Notify local listeners in the current tab
      listenersRef.current.forEach((listener) => listener());
    },
    []
  );

  // Clean up channel on component tree unmount
  useEffect(() => {
    return () => {
      if (listenersRef.current.size === 0) {
        channelRef.current?.close();
        channelRef.current = null;
      }
    };
  }, []);

  return [currentState, setState] as const;
}

With this hook, updating state in one tab immediately broadcasts the change to every other active tab, triggering instant, synchronized re-renders without server intervention.

---

Leader Election Architecture with the Web Locks API

When a user has ten tabs open to a dashboard, having all ten tabs maintain independent WebSocket connections or poll an API every 5 seconds is deeply inefficient.

The optimal pattern is Leader Election:

1. All tabs coordinate to elect exactly one Leader Tab.
2. Only the Leader Tab establishes the WebSocket connection or runs the background polling loop.
3. The Leader Tab broadcasts incoming server updates to all Follower Tabs via BroadcastChannel.
4. If the user closes the Leader Tab, one of the remaining Follower Tabs is immediately promoted to become the new Leader.

Implementing Mutual Exclusion with navigator.locks

The Web Locks API provides a native, OS-level mutual exclusion primitive across browser tabs:

import { useEffect, useState, useRef } from 'react';

export function useTabLeader(channelName: string) {
  const [isLeader, setIsLeader] = useState(false);
  const lockAbortRef = useRef<AbortController | null>(null);

  useEffect(() => {
    if (typeof window === 'undefined' || !('locks' in navigator)) {
      // Fallback: Assume leader if Web Locks not supported
      setIsLeader(true);
      return;
    }

    lockAbortRef.current = new AbortController();

    // Request an exclusive lock with the channel's name
    navigator.locks.request(
      `leader-lock-${channelName}`,
      { mode: 'exclusive', signal: lockAbortRef.current.signal },
      async () => {
        // Once this promise callback executes, this tab HAS ACQUIRED THE LOCK!
        setIsLeader(true);
        console.log(`[Tab ${channelName}] Promoted to LEADER`);

        // Hold the lock permanently until this tab closes or unmounts
        await new Promise((resolve) => {
          lockAbortRef.current?.signal.addEventListener('abort', resolve);
        });

        setIsLeader(false);
      }
    ).catch((err) => {
      if (err.name !== 'AbortError') {
        console.error('Lock acquisition failed', err);
      }
    });

    return () => {
      lockAbortRef.current?.abort();
    };
  }, [channelName]);

  return isLeader;
}

The Hybrid Leader/Worker Pattern

In your application root, combine useTabLeader with your network worker:

export function NetworkManager() {
  const isLeader = useTabLeader('app_connection');

  useEffect(() => {
    if (!isLeader) {
      console.log('Follower tab: Listening for broadcast updates');
      return;
    }

    // Only the Leader tab opens the socket
    console.log('Leader tab: Establishing central WebSocket connection');
    const ws = new WebSocket('wss://stream.example.com/live');
    const channel = new BroadcastChannel('app_connection');

    ws.onmessage = (event) => {
      // Fan-out server events to all follower tabs locally!
      channel.postMessage(JSON.parse(event.data));
    };

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

  return null;
}

---

Critical Enterprise Use Cases

1. Synchronized Cross-Tab Logout

When a user logs out in an active session, retaining authenticated data in other open tabs creates serious security liabilities. A cross-tab logout channel ensures that calling logout() in one tab immediately clears session caches, purges in-memory tokens, and navigates all other open tabs to the login screen:

export const authChannel = new BroadcastChannel('auth_sync');

export function triggerGlobalLogout() {
  authChannel.postMessage({ type: 'LOGOUT', timestamp: Date.now() });
  performLocalLogout();
}

2. Cart & Inventory Reconciliation

In e-commerce platforms, adding an item in Tab 1 updates the shared cart state across all tabs instantly, preventing "stale checkout" errors when users attempt to complete a purchase in Tab 2.

---

Architectural Guidelines and Best Practices

1. Explicit Message Typing: Never broadcast untyped strings. Define TypeScript discriminated unions ({ type: 'CART_UPDATED'; payload: CartItem[] }) to ensure type safety across all channel listeners.
2. Always Close Channels on Unmount: Dangling BroadcastChannel instances prevent garbage collection of their callback closures. Always invoke channel.close() inside effect cleanups.
3. Graceful Fallbacks: In environments where Web Locks or BroadcastChannel may be restricted (e.g., partitioned third-party iframes), provide graceful fallbacks using localStorage storage event listeners.

---

Conclusion

Multi-tab synchronization transforms fragmented browser sessions into a cohesive, responsive application environment. By combining BroadcastChannel for zero-latency in-memory messaging, useSyncExternalStore for tearing-free React rendering, and Web Locks for resource-efficient leader election, developers can deliver desktop-class multi-window experiences that protect backend capacity and eliminate state drift.

---

Sources

• MDN Web Docs: Broadcast Channel API
• MDN Web Docs: BroadcastChannel
• MDN Web Docs: Web Locks API
• React Reference: useSyncExternalStore