React

Read stores and derived values in components with useStore, select a part, and render on the server.

@workspace/active-state 1.0.1Developmentunreleased, in development in Foundationbaseline ce081dc3

useStore#

'use client';
import {useStore} from '@workspace/active-state/react';
function Basket() {  const count = useStore(lines, (list) => list.length);  const names = useStore(lines, (list) => list.map((line) => line.product));  return (    <p>      {count} items: {names.join(', ')}    </p>  );}

• useStore(readable, selector?, options?) is useSyncExternalStore with a selection: the component renders again only when the selected value changes under options.equal (default shallow), so a selector that builds a new array does not loop.
• It reads the object you pass; there is no provider. Pass any Store, Derived, an operation's status, or anything with state and subscribe.
• The selector and equal run during render and must be pure.

Where the model lives#

• Module scope for state the whole page shares, as in the examples on this site.
• useScoped(factory) (experimental) for a model that lives as long as one component: the factory receives a pending Scope, builds stores and operations in it, and the model is activated on commit and disposed after unmount.

Server rendering#

The server snapshot is the same state getter. It is consistent only when your host gives the server and the client the same initial data for a request; serializing that data is the host's job.

Errors#

A failure in a subscriber, effect or settlement goes to the runtime's error sink (globalThis.reportError by default), not to a React error boundary. Your own call's failure (an updater, a transaction) reaches you synchronously.