Controlled vs. Uncontrolled Components
A controlled component is a puppet; its parent pulls the strings via props. An uncontrolled one manages its own state. This pattern is key for coordinating siblings, like ensuring only one panel in an accordion is open.
Why it exists
Sometimes, the state of two components must change together. For example, in an accordion, expanding one panel should collapse another. If each panel manages its own open/closed state, they can't coordinate. This requires a single source of truth, which is achieved by moving state to their closest common parent.
The mental model
The core difference is who owns the state. An uncontrolled component manages its own state internally (e.g., using React's useState). A controlled component receives its state value and a function to change that state as props from a parent. The parent 'controls' the child's state, making the child a pure reflection of the props it receives.
How it works
To make a component controlled, you 'lift state up'. First, you remove the internal state management from the child component. Second, you add that state to the parent component. Finally, the parent passes the state value down as a prop, and also passes down an event handler function (as another prop) that the child can call to tell the parent to update the state. The child no longer decides its own state; it only requests changes from its controlling parent.
When to use it
Use controlled components when you need to coordinate state between multiple components. It's the standard pattern for complex forms where one input's validity affects another, or for UI widgets like tabs or accordions where children's states are mutually exclusive. This makes the parent the single source of truth.
When not to use it
Uncontrolled components can be simpler for self-contained elements or simple forms where you only need the final value upon submission. If a component's state doesn't affect anything outside of it, letting it manage its own state can reduce boilerplate in the parent.
One canonical example
An accordion with several panels. Initially, each Panel component might have its own isActive boolean state, making it uncontrolled. To ensure only one panel is open, you lift the state up. You remove isActive from Panel and add an activeIndex state to the parent Accordion. The Accordion then passes isActive={activeIndex === myIndex} down to each Panel. The Panel is now a controlled component, fully managed by its parent.
Interview question
For which use case would a controlled component be the most appropriate choice?
- a.A simple form input where the value is only retrieved on submission.
- b.An accordion where opening one panel automatically closes all others.Correct
- c.A component with complex internal state logic that doesn't affect siblings.
- d.A self-contained UI element whose state changes are isolated.
Why? this is the answer
The card explicitly states that an accordion where expanding one panel collapses others is a canonical example requiring controlled components to coordinate state and maintain a single source of truth. Options A, B, and D describe scenarios where uncontrolled components are generally preferred because their state is self-contained or only needed at specific times, reducing boilerplate for the parent.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
- #react
- #state management
- #design patterns
- #components
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles