foundation
Controlled components
Keep user input state owned by the component or caller deliberately so validation, reset, and synchronization are predictable.
Controlled components keep input value and change handlers owned by React state or parent props, making validation, reset, and cross-field synchronization predictable. Uncontrolled components defer to the DOM ref. Choose deliberately per field based on form complexity and accessibility needs.
On interviews: explain controlled vs uncontrolled trade-offs and syncing with external stores. Mention performance for large forms.
Common pitfalls: mixing controlled and uncontrolled on the same input; stale closures in onChange handlers; fighting the DOM with constant re-renders on every keystroke without debouncing where needed.
Checklist:
- Single source of truth for field value.
- Explicit handlers update state immutably.
- Default values set once for uncontrolled mode.
- Form libraries document ownership boundaries.