How do you use useState to track user input?

WHAT THIS TESTS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: react.dev