How do you use useState to track user input?
Whether you know useState basics for controlled inputs.
Initialize with useState at top level, bind input value to state, and update via onChange using setter.
Calling useState conditionally or mutating state directly.
What's really being asked
This question checks if you know how to turn a form input into a controlled component with the useState hook. Interviewers want to see that you understand where hooks live, how to read and write state, and how React re-renders after a state update.
A GOOD ANSWER COVERS four things in order. First, import useState from React and call it at the top level of the component, never inside a loop or condition. Second, initialize the state with a sensible default for the input type, usually an empty string for text. Third, wire the input by setting its value attribute to the state variable and its onChange attribute to a handler that calls the setter, passing event target value. Fourth, mention that calling the setter triggers a re-render so the UI stays in sync with the state.
COMMON WRONG ANSWERS include several red flags. One is calling useState inside an if statement or after an early return, which breaks the Rules of Hooks. Another is mutating the state variable directly instead of using the setter function, which means React will not re-render. A third is forgetting to bind the value attribute, leaving the input uncontrolled so React and the DOM fight over the current value. A fourth is passing the setter a function unintentionally, because useState treats a function argument as an initializer or updater depending on context.
What usually comes next
The interviewer might ask how to handle multiple inputs, which leads to either separate useState calls or a single state object. They might ask about the difference between controlled and uncontrolled inputs, or how to avoid unnecessary re-renders when lifting state up. They could also ask what happens if you pass a function to useState as the initial value, which is the lazy initialization pattern.
A concrete example
Imagine a search box in a header. You declare state as query and setQuery by calling useState and passing an empty string. Then you render an input whose value equals query and whose onChange equals a function that calls setQuery with event target value. Every keystroke updates query, React re-renders the component, and the input displays the latest text.
Interview question
Which pattern correctly wires a text input as a controlled component using useState?
- a.Initialize useState with an empty string at the top level, bind the input value to the state variable, and update it via onChange by calling the setter with event.target.value.Correct
- b.Declare the state variable with useState inside a useEffect hook so it runs after mount, bind value to the state, and mutate the variable directly in the onChange handler.
- c.Call useState inside an if block to avoid unnecessary renders, set the input value to the state variable, and update it by assigning event.target.value directly to the state variable.
- d.Initialize useState with null at the top level, leave the input uncontrolled by omitting the value attribute, and call the setter inside onChange to update the state.
Why? this is the answer
The correct pattern requires calling useState at the top level with an empty string, binding the input value to state, and updating via the setter in onChange. Option C is tempting because it mentions binding value, but calling useState conditionally violates the Rules of Hooks and direct mutation prevents React from re-rendering.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
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