Forms And Inputs

// validation timing: three moments, one schema
const schema = z.object({ amount: z.coerce.number().int().positive().max(5_000_000), account: z.string().length(10) })
// 1. as you type: only for format feedback (a character count, a mask), never for "required" errors on an untouched field
// 2. on blur: field-level, after the user leaves the field: errors[field] = schema.shape[field].safeParse(value)
// 3. on submit: the whole schema; focus the first invalid field; render an error summary with links (accessibility)
// 4. on the server: the whole schema again. the client validation is UX; the server validation is the rule
// derive, do not store: const errors = useMemo(() => validateAll(values), [values]) when values are in state; or validate(formData) in the action
// async validation (does this account exist): debounce, cancel the previous (AbortController or a query key), show "checking…", never block typing
// the shape libraries agree on: a schema object (zod, valibot, yup) shared by client and server, so the two validations cannot drift

// a form with actions (React 19): progressive, pending-aware, and server-validated
'use server'
export async function transfer(prev, formData) {                       // (previousState, formData) → next state
  const parsed = schema.safeParse(Object.fromEntries(formData))        // validate on the server, always
  if (!parsed.success) return { errors: parsed.error.flatten().fieldErrors, values: Object.fromEntries(formData) }
  const key = formData.get('idempotencyKey')
  const result = await bank.transfer({ ...parsed.data, key })          // idempotent by key
  revalidateTag('balance')
  redirect(`/receipts/${result.id}`)                                   // POST-redirect-GET: refresh is safe
}
// client
function TransferForm() {
  const [state, action, pending] = useActionState(transfer, { errors: {}, values: {} })
  const key = useRef(crypto.randomUUID())
  return (
    <form action={action}>
      <input type="hidden" name="idempotencyKey" value={key.current} />
      <label>Amount <input name="amount" inputMode="decimal" defaultValue={state.values.amount} aria-describedby="amount-err" /></label>
      {state.errors.amount && <p id="amount-err" role="alert">{state.errors.amount[0]}</p>}
      <SubmitButton />                                                  // useFormStatus().pending inside: disabled while submitting
    </form>
  )
}
function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>{pending ? 'Sending…' : 'Send'}</button> }
// without JavaScript: a normal POST to the action's endpoint; the server validates and redirects. with JavaScript: no reload, pending state, errors in place.
// the values survive a failed submit because the action returns them; the form is uncontrolled (defaultValue) so typing costs nothing.

// a 60-field form that does not lag
// 1. uncontrolled by default: values in the DOM or in a form library's store; React renders a field only when ITS error or options change
const { register, handleSubmit, formState: { errors } } = useForm({ defaultValues })
<input {...register('amount', { required: true })} />              // a ref + native listeners; no React state per keystroke
// 2. subscribe narrowly: const currency = useWatch({ name: 'currency' })   // only this component renders when currency changes
// 3. split the form into sections, each its own component; errors are per section; a section renders on its own errors
// 4. dependent fields: a derived value from a watched field, not an effect that sets another field's value
// 5. virtualise repeated groups (a 500-row line-items table): the virtualisation chapter of the algorithms course; keep the data in the store, render the window
// 6. the submit: handleSubmit reads all values once; validate; one request
// what defeats it: a controlled <input value={state.x}> at the top-level form state (every keystroke renders everything); a context holding all values
// (every consumer renders); an effect per field syncing to a store (an effect chain per keystroke)