Hooks overview

The React package ships ten hooks, and each one answers exactly one question. This section gives every hook its own page: what it is in plain English, every option it takes, what it returns, a worked example, and the gotchas worth knowing before you hit them.

Hook	The question it answers	In one line
useSharedState	"What is the current value?"	useState, but the value exists in every tab on your origin
useChannel	"Give me the typed event channel named X"	Returns the page-wide channel singleton for a name
useMessage	"Run this when X happens in another tab"	Subscribes to one event type, with no stale-closure traps
useSend	"Let me announce X to every other tab"	A stable, typed post function for a channel
usePeers	"Who else is here?"	A live list of open tabs, windows, and workers
useClientId	"Which one am I?"	This tab's stable id on a bus — matches meta.clientId everywhere
useOpenedWindow	"Open a window on another domain and hear back"	The whole cross-origin window lifecycle as render state

There are also two factories. defineChannel binds a channel's name and message map once at module level and returns ready-made useSend/useMessage — the ergonomic way to use the event trio across many components. defineStore does the same for a store, and is where you turn on persistence so the state survives closing the last tab.

And when it misbehaves, <Inspector /> shows you every message crossing the bus, in both directions.

Three things hold for all of them:

1. There is no Provider. A BroadcastChannel is already global to the origin — its identity is the name string — so a React context couldn't scope it any further. The hooks share module-level singletons per name, built on useSyncExternalStore, and you just call them.
2. Everything is typed end to end. You declare a message map or a state type once; every post, on, and setter is checked against it.
3. SSR works out of the box. Hooks render initial values on the server and converge right after hydration; nothing throws where BroadcastChannel doesn't exist.

Not sure whether something belongs in state or in an event? Same test as always:

The litmus test

If a tab opened later needs to know it, it's state — useSharedState. If only currently-open tabs care, it's an event — useMessage.

Beyond the hooks

Installing use-everywhere re-exports the entire framework-agnostic core, so it's one dependency for everything — the engines the hooks are built on (createSharedStore, createLeader, …), the version clock (newer), the transports, and the debug seam. None of it needs React.

That's its own section: Core (without React).

Where to next

• useSharedState — start here; it's the headline act.
• The mental model — the two ideas these hooks are a surface for.
• Recipes — the hooks combined into real features.