Controlled vs Uncontrolled in React
From the React Design Patterns cheat sheet · Component API Patterns · verified Jul 2026
Controlled vs Uncontrolled
Two ways to manage component state - let parent control, or manage internally
jsx
// Controlled - parent owns the state
<Input value={value} onChange={setValue} />
// Uncontrolled - component owns the state
<Input defaultValue="hello" ref={inputRef} />💡 Controlled = parent owns state; Uncontrolled = DOM/component owns state
⚡ Building a component to support both is a common library pattern (Radix, MUI)
📌 React warns if you switch between controlled/uncontrolled - pick one and stick with it
🟢 react-hook-form leverages uncontrolled inputs for fewer re-renders on large forms
controlleduncontrolledforms
Continue with React Design Patterns
Save the full cheat sheet or work through every related task.