Handling Storage Events Across Tabs

When a user has your app open in two tabs and updates a value in tab A, tab B still shows the old state. Each tab has its own React state in memory even though they share localStorage.

Without coordination, the tabs disagree about the current value.

The browser dispatches a storage event on other tabs of the same origin whenever localStorage changes. Importantly, it does not fire in the tab that made the change.

This is exactly the signal tab B needs to learn that tab A updated something.

In a useEffect you call window.addEventListener('storage', handler) and return a cleanup that removes it. This subscribes the component to cross-tab changes.

The effect should run once on mount, so an empty or stable dependency array is appropriate.

The event object carries key (which key changed), oldValue and newValue (the strings before and after), and storageArea (the affected storage object).

A null key with null values means the storage was cleared entirely.

The storage event fires for every key in the origin, so your handler should check event.key === yourKey before reacting. Ignoring unrelated keys avoids needless re-renders.

Also handle the case where event.newValue is null, meaning the key was removed.

When a relevant change arrives, parse event.newValue and call your setter to update React state. This brings the second tab in sync with the change made elsewhere.

Combined with a useLocalStorage hook, this closes the loop between tabs.

BroadcastChannel lets tabs of the same origin send messages to each other directly with postMessage. It is cleaner than piggybacking on storage events and works even without writing to localStorage.

You create a channel by name, post updates, and listen for message events.

React provides useSyncExternalStore for subscribing to external stores in a concurrent-safe way. You can wire its subscribe function to the storage event and its snapshot to a localStorage read.

This integrates external storage updates correctly with React rendering.

A classic application is logging out everywhere: when one tab clears the auth flag, the storage event in other tabs detects it and redirects them to the login screen.

This prevents a stale tab from continuing to show authenticated content.

Theme is another great fit: toggling dark mode in one tab writes to localStorage, the storage event fires in the others, and they update their theme state to match instantly.

The user gets a consistent appearance no matter which tab they switch to.

Cross-tab sync comes down to listening for the storage event (or using BroadcastChannel), filtering to your keys, and updating React state from the new value.

For robust, concurrent-safe subscriptions, useSyncExternalStore is the modern choice.

Test your understanding of cross-tab events.

You learned that the storage event fires in other tabs, how to listen, filter by key, and update state, plus the BroadcastChannel and useSyncExternalStore alternatives.

You saw real use cases like logout-everywhere and cross-tab dark mode.