@tldraw/state-react

Active contributors: David Sheldrick, Steve Ruiz

Purpose

@tldraw/state-react is the React glue for @tldraw/state. It exposes hooks that subscribe React components to signals, plus a track() HOC for component-wide reactivity.

Directory layout

packages/state-react/
├── package.json
└── src/
    ├── index.ts
    └── lib/
        ├── useValue.ts              # the workhorse hook
        ├── useStateTracking.ts
        ├── useComputed.ts
        ├── useAtom.ts
        ├── useReactor.ts
        ├── useQuickReactor.ts
        ├── track.tsx                # HOC for tracked components
        └── ...

Key abstractions

Hook	Purpose
useValue(name, fn, deps)	Subscribe to a signal-derived value. Re-renders when the value changes.
useComputed(name, fn, deps)	Memoize a Computed across renders.
useAtom(name, initial)	Memoize an atom across renders.
useReactor(name, fn, deps)	Run a reactor for the lifetime of the component.
useStateTracking(name, fn)	Bind a React state update to signal changes.
track(Component)	Higher-order component that re-renders whenever any read signal changes.

How it works

useValue registers a per-component reactor that, on signal invalidation, schedules a React re-render via useSyncExternalStore-style mechanics. track wraps the component's render in a tracking scope — every signal it reads becomes a dependency.

Integration points

• Imports. @tldraw/state, react.
• Importers. @tldraw/editor and downstream UI packages.

Related

• @tldraw/state
• Signals primitive