useStore

[captbaritone]

useStore Implementation Notes

This is a prototype implementation of a createStore function and useStore hook for React, which allows components to subscribe to external data stores.

It is based on our previous exploration of a use(store) API as well as exploration done in the react-concurrent-store repository.

Architecture

Each React root maintains a StoreTracker which is a reference-counted registry of all stores used within that root. For each store, a StoreWrapper is created which tracks the committed and transition state(s) for that store within that root.

The wrapper is also responsible for tracking fibers which are subscribed to the store, and scheduling updates to those fibers when the store changes.

For the sake of expediency, the useStore hook is currently implemented in terms of the existing useReducer implementation. While this forces us to use some awkward hacks it has the advantage of keeping the implementation minimally invasive for this initial prototype/validation phase. For example, we're able to reuse all the existing hook queue/update logic without modifications, which would leak out into the rest of React.

Hacks

• Rather than enqueuing update at their appropriate priority and filtering out the relevant updates for a given lane at render time, we publish only eager updates. This forces us to publish additional updates when a sync update interrupts a concurrent update, since the can't rely on updates to get reapplied.
• We repurpose the dispatch field of the hook queue to store the arguments to the useStore hook (the store wrapper and selector). This allows us to access them from within the updateStore function, which is called outside the render context.