React Patterns

Quick Guide: React 19 settles four things this skill turns on — ref is a regular prop and forwardRef is redundant, form submission state comes from useActionState, useFormStatus reads the enclosing form only from a child component, and a ref callback may return a cleanup function. Components stay styling-agnostic by exposing className and expressing variants as data-* attributes.

Detailed Resources:

• examples/core.md — component shape, variant props, event handlers, accessible controls
• examples/hooks.md — usePagination, useDebounce, useLocalStorage
• examples/react-19-hooks.md — useActionState, useFormStatus, useOptimistic, use(), ref cleanup
• reference.md — decision trees, anti-patterns with corrected code, component and hook checklists

Which path applies

• React rendered in the browser — every pattern below applies as written, and form submission goes through useActionState in examples/react-19-hooks.md.
• React rendered by a server framework — submission and data loading belong to that framework's own server primitives, so skip Pattern 6 and take the component, hook, ref and error-boundary patterns unchanged.