Controlled vs uncontrolled inputs in React forms

Learning goals

• Who should own the current value?
• How much should the UI react while typing?
• Is this a tiny form or a behavior-rich form?
• Do you need easy reset, dirty checking, or draft comparison?

Key decisions to discuss

• Pick a direction for this exact prompt, not the universal winner.
• State the trade-off that matters most for this scenario.
• Name when another option becomes the better answer.
• Keep the explanation grounded in concrete constraints.

Evaluation rubric

• Strong answers tie the recommendation to the prompt.
• Good tradeoff reasoning explains downsides, not just upsides.
• The answer should show when the recommendation stops being right.
• Follow-up pressure should not break the argument.

Constraints / Requirements

• Which direction would you defend for this prompt, and how would you explain when the other option is…
• Keeps React as the source of truth when the UI must react to every value change.
• Lets the browser own the input value when the form is simple and React does not…

Options on the table

Use controlled inputs: Keeps React as the source of truth when the UI must react to every…
Keep inputs uncontrolled: Lets the browser own the input value when the form is simple and React…

Common pitfalls

• Arguing from preference instead of prompt constraints.
• Pretending one option is always the winner.
• Ignoring the main downside of the chosen direction.
• Failing to explain when the alternative becomes stronger.

Related questions

• Props drilling vs Context for shared React UI stateFree
• useState vs useReducer for growing React component stateFree
• Derive in render vs store derived state in ReactPremium
• useEffect vs event-handler logic in ReactPremium