useSyncExternalStore: test snapshot identity and the initial SSR value

External stores can alert their subscribers without altering the UI rendered via useSyncExternalStore. In this experiment, after the same snapshot object underwent a modification, the screen still exhibited 0 post-notification. The Hook requires a subscription alert and a snapshot embodying the alteration. During SSR, the initial client read must also receive the value utilized to generate the server HTML.

The notification arrived with the same snapshot reference. The test store encompasses both replacement and an intentionally inaccurate alteration for contrast. The mutate method is not a recommended application approach. The function createCounterStore(initial) establishes a snapshot equating to initial; a set named listeners is initialized.

The returned object includes functions for obtaining the snapshot (getSnapshot), registering a listener (subscribe), removing a listener (replace), altering the snapshot (mutate), and a method to ascertain the count of listeners (listenerCount). The replace function fabricates a fresh object; the mutate function modifies solely the count on the prevailing object.

Both invoke the registered listeners. The UI extracts the count from useSyncExternalStore(store.subscribe, store.getSnapshot). In the experiment, identical snapshot mutatio ns and notifications yielded disparate outcomes. The screen displayed 0 subsequent to the notification. The Hook demands a subscription alert and a snapshot signifying the change when juxtaposed with Object.is.

Contrarily, verifying sole notification receipt overlooks this disparity. The value yielded by getSnapshot must mirror the variant when juxtaposed with Object.is. The official documentation elucidates the contract: preserve the same snapshot when data remains unaltered, and provide a novel immutable snapshot upon alteration. The experiment verified the mutation sans extraneous parent-state update or other re-render.

It failed to assess the UI post a rerender instigated elsewhere. Delivering a novel object for each read contravenes the contract as well. The documentation describes this pattern as instigating an update loop, yet this experiment did not execute that loop. It gauges a store that reuses a snapshot until the ensuing change. Incorporating unsubscription within the store contract entails subscribe returning a function that unregisters the listener in addition to registering it.

The experiment logged one subscription upon mounting and 0 post-unmount. The identical store-provided subscribe function is reused. This does not quantify resubscription instigated by generating a novel function for each render or performance with myriad subscribers. SSR necessitates a corresponding initial snapshot alongside a current value.

The server generated this HTML through renderToString: output id=store-count 0 /output. The client store intentionally initiates with an updated current value of 1. The server's initial { count: 0 } is conveyed via window.__BOOTSTRAP__ and read during hydration.