---
id: "packages/active-state/react"
title: "React"
description: "Read stores and derived values in components with useStore, select a part, and render on the server."
url: "/packages/active-state/react"
locale: "en"
revision: "7f71750bdd539942"
---

# React

## `useStore`

```tsx
'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.