Question Bank
React Controlled vs Uncontrolled Components: Two Explanations Quiz
Difficulty: Easy
Two explanations of controlled vs uncontrolled inputs with concrete code, plus companions on `defaultValue` and on extending the controlled idea beyond form inputs.
React Controlled vs Uncontrolled Components: Two Explanations Quiz
Two explanations of controlled vs uncontrolled inputs with concrete code, plus companions on `defaultValue` and on extending the controlled idea beyond form inputs.
977 views
16
Define a controlled input and an uncontrolled input in React, and explain who owns the source of truth for the value in each case.
Examples
Example 1:
Input: a text field that the parent component reads on every keystroke
Output: controlled (value comes from React state, parent sees every change via onChange)
Explanation: React holds the state; the DOM is a downstream view.Example 2:
Input: a text field that the parent only inspects when the form is submitted
Output: uncontrolled (the DOM owns the value; React reads it via a ref)
Explanation: the input keeps its own state internally; React queries it on demand.Walk through what happens on each keystroke in a controlled input, contrasted with an uncontrolled input. Why do controlled inputs trigger a re-render but uncontrolled ones do not?
Examples
Example 1:
Input: user types one character into a controlled input bound to a useState value
Output sequence: keystroke -> onChange fires -> setState -> React re-renders the component -> input's value prop equals the new state.
Explanation: state change forces a render, and the render writes the new value back to the DOM.Example 2:
Input: user types one character into an uncontrolled input with defaultValue and a ref
Output sequence: keystroke -> the browser updates the input's internal value -> no React state changes -> no re-render.
Explanation: React never observes the keystroke; it only sees a value when the code calls ref.current.value.Explain the difference between value and defaultValue on an <input> in React, and predict what happens if you pass both at the same time.
Examples
Example 1:
Input: <input value="hi" />
Output: a controlled input pinned to "hi"; typing has no visible effect because no onChange writes the new value back.
Explanation: when `value` is set without `onChange`, React treats the field as a read-only controlled input.Example 2:
Input: <input defaultValue="hi" />
Output: an uncontrolled input initialized to "hi"; the user can edit it freely and React does not track changes.
Explanation: defaultValue only sets the initial DOM value; the input is otherwise uncontrolled.Example 3:
Input: <input value="hi" defaultValue="bye" />
Output: React warns about mixing controlled and uncontrolled and uses `value`.
Explanation: passing both is a contradiction; React keeps `value` and warns once.Generalize controlled vs uncontrolled beyond <input>: explain what "controlled" means for a custom component such as a <Modal isOpen onClose> or a <Tabs value onChange>.
Examples
Example 1:
Input: <Modal isOpen={open} onClose={() => setOpen(false)} />
Output: a controlled Modal whose open/closed state lives in the parent.
Explanation: parent owns the state; child notifies via onClose; the child has no internal isOpen state.Example 2:
Input: <Modal defaultOpen />
Output: an uncontrolled Modal that manages its own open/closed state internally and only takes an initial value.
Explanation: child owns the state; parent does not see day-to-day changes, only fires-and-forgets the initial config.