What are controlled components?

Controlled components are those in which form data is handled by the component’s state. The component's state manages the value of the form element. Any changes to the input are handled by functions like onChange, which update the state. Uncontrolled components are those where the form data is managed by the DOM, not by the component's state. The values of the form elements are handled by the DOM itself, and to access any value that has been entered, we take the help of refs

Controlled Component

Uncontrolled Component

Difficulty: 5/10

Topics: state management, form handling, input synchronization

Scenario Questions

0-2 years experience

1
How would you build a text input that updates its displayed value as the user types using React state?
2
What happens if you render an <input> with a value prop but forget to attach an onChange handler?
3
After submitting a form, how would you clear all the fields if they are controlled components?

2-5 years experience

1
We have a form where some fields are controlled and others are uncontrolled; why might that cause bugs and how would you fix it?
2
During a code review you notice a controlled input causing the parent component to re‑render on every keystroke—what optimization would you suggest?
3
If a parent passes a value prop but the child also keeps its own internal state, why could the UI get out of sync?

5-8 years experience

1
Design a reusable controlled component library for complex forms with validation—what patterns would you use to avoid prop‑drilling and keep performance acceptable?
2
How would you handle performance when a large data table contains hundreds of controlled input cells that each update on change?
3
Explain your approach to migrating a legacy uncontrolled form to fully controlled components without breaking existing users.

8+ years experience

1
Across multiple teams sharing a UI component library, how would you enforce consistent use of controlled components and prevent anti‑patterns?
2
What are the trade‑offs of mandating controlled components at the architecture level versus allowing a mixed approach?
3
How would you design a type‑safe API for controlled components in a TypeScript monorepo to support future extensions and maintainability?

Follow-up Questions

❓Can you walk me through the data flow for that component?
❓What edge cases would you test for in production?
❓How would you verify that the component stays in sync after a refactor?