Chapter 14: Reactivity

Core Idea

Nothing re-renders automatically — every component that needs form/field state must explicitly subscribe via useSelector(form.store, selector) or form.Subscribe, and omitting the selector function defeats the entire point.

Key Concepts

• useSelector(form.store, selector): for reading a value inside component logic (e.g. to compute something, not just render it) — re-renders the calling component when the selected slice changes.
• form.Subscribe: for UI reactivity — an isolated component that re-renders itself only, not its parent, ideal for "show this piece of state right here."
• The selector is not optional in practice: passing a selector that returns the whole state (or omitting it) subscribes to every change, re-rendering on every keystroke anywhere in the form — the docs explicitly warn against this.
• useStore is deprecated in favor of useSelector with the same argument shape — a drop-in rename during migration.

Code Examples

// Logic-based: needed inside a calculation/condition
const firstName = useSelector(form.store, (state) => state.values.firstName)

// UI-based: isolated re-render, doesn't touch the parent
<form.Subscribe
  selector={(state) => state.values.firstName}
  children={(firstName) => <div>{firstName}</div>}
/>

• What it demonstrates: the same "select firstName" intent expressed both ways — pick useSelector when you need the value in surrounding logic, form.Subscribe when you're only using it to render a small piece of UI.

Key Takeaways

1. Every custom form/field-state read should go through a selector — treat "read the whole state object" as a smell, not a shortcut.
2. Prefer form.Subscribe over useSelector specifically to keep a re-render local, e.g. inside a large form where the parent must stay stable.
3. If you inherited code using useStore, it's safe to mechanically rename to useSelector — the argument shape didn't change.

Connects To

• Ch007 Basic Concepts: where this subscription model was first introduced.
• Ch023 Debugging: over-rendering symptoms this chapter's discipline prevents.