Replace an ad hoc useEffect subscription with useSyncExternalStore

You are migrating a component's subscription to an external, non-React data source — a browser API, a third-party SDK, a plain module-level store — from a manual useEffect-plus-useState pattern to useSyncExternalStore, React's dedicated primitive for exactly this case.

EXTERNAL SOURCE
A module-level WebSocket client that maintains a live connectionStatus (connected/reconnecting/disconnected) shared across the whole app.

CURRENT SUBSCRIPTION CODE
useEffect(() => { const handler = s => setStatus(s); wsClient.on("statusChange", handler); setStatus(wsClient.status); return () => wsClient.off("statusChange", handler); }, []);

SNAPSHOT SHAPE
A string enum: 'connected' | 'reconnecting' | 'disconnected' — already a primitive, so no extra caching is needed for reference stability.

SSR REQUIREMENT
Yes — this status indicator appears in a server-rendered header; the WebSocket obviously does not exist during the server render.

MIGRATION RULES
Write a getSnapshot function that reads the current value directly from the external source, synchronously, with no side effects — it must be pure and fast, since React may call it many times per render to check whether the value has changed. The value getSnapshot returns must be either a primitive or a stable reference that only changes identity when the underlying data has actually changed; if getSnapshot constructs a brand-new object or array on every call even when the underlying data is identical, React will conclude the snapshot changed on every single render and useSyncExternalStore will fall into an infinite re-render loop — cache or memoize the snapshot at the source so the same underlying state always produces the same reference. Write a subscribe function that registers a listener with the external source and returns an unsubscribe cleanup function; React calls this once and manages calling your provided callback whenever it needs to re-check the snapshot, so this function's only job is wiring the listener, not tracking any state of its own. Do not keep the old useEffect-plus-useState version running alongside the new hook "just in case" — the entire point of this migration is to remove the specific class of bug the old pattern cannot rule out: under concurrent rendering, a component using useEffect-plus-useState to mirror external state can render with a value that is momentarily inconsistent with what a sibling component reading the same external source renders in the same commit, a phenomenon called tearing, which useSyncExternalStore is specifically designed to prevent by construction. If this component can render on the server, provide a third argument, getServerSnapshot, that returns a safe, deterministic value for the server render — never assume getSnapshot itself is safe to call in an environment where the external source (a browser global, typically) does not exist.

OUTPUT FORMAT
1. The getSnapshot and subscribe functions, as real code, with the stable-reference caching explained inline as a comment where it happens.
2. The updated component using useSyncExternalStore, replacing the removed useEffect and useState entirely.
3. The getServerSnapshot implementation if SSR applies, or an explicit note that it was omitted and why that's safe here.
4. A one-line description of the specific tearing scenario this migration prevents for this exact external source.