Chapter 7: Basic Concepts (React)

Core Idea

Four pieces make up every form: the form instance (useForm), a field instance (form.Field), field state (metadata + value + validation status), and an explicit subscription model that opts components into re-rendering rather than doing it automatically.

Key Concepts

• Form instance: the object useForm returns — the control hub for the whole form's lifecycle, field registration, and submission.
• Field instance: an individual form.Field wraps one input, tracking its own value/validation independently of siblings.
• Field state (field.state): value, validation status, error messages, plus interaction flags — isTouched, isDirty, isBlurred.
• Subscriptions: useSelector(form.store, selector) (logic-level) or form.Subscribe (UI-level) — see ch014 for the full reactivity model this enables.

Code Examples

const form = useForm({
  defaultValues: { name: '' },
  onSubmit: async ({ value }) => console.log(value),
})

const name = useSelector(form.store, (state) => state.values.name)

<form.Field
  name="name"
  validators={{ onChange: ({ value }) => value ? undefined : 'Required' }}
  children={(field) => (
    <input value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
  )}
/>

• What it demonstrates: a form-level subscription (useSelector) alongside a validated field, showing the two concerns (reading state, validating a field) as separate mechanisms.

Key Takeaways

1. field.state is the one place to look for a field's current value, validity, and interaction history — don't track touched/dirty separately yourself.
2. Selecting specific state (useSelector/form.Subscribe) instead of reading the whole form is the default, not an optimization to add later (ch014).
3. Field instances are independent — one field's validators/listeners never implicitly affect a sibling unless you wire that explicitly (onChangeListenTo, ch013).

Connects To

• Ch014 Reactivity: the full subscription model referenced here.
• Ch008 Form Validation: the validators prop shown in the example.
• Ch006 React Quick Start: the minimal version of this same shape.