What is the purpose of the `useState` hook in React?

Difficulty: 2/10

state management, functional components, hooks

1
useState is a React Hook that lets you add a state variable to your component.
2
The useState hook allows functional components to add stateful behaviour by providing a way to declare and update state variables.
3
It returns a state variable and a function to update it, enabling components to re-render when the state changes.

javascript

initialState: The value you want the state to be initially.

1
It can be a value of any type, but there is a special behaviour for functions.
2
This argument is ignored after the initial render.
3
If you pass a function as initialState, it will be treated as an initializer function. It should be pure, should take no arguments, and should return a value of any type.
4
React will call your initializer function when initializing the component, and store its return value as the initial state.

useState returns an array with exactly two values:

1
The current state. During the first render, it will match the initialState
2
The set function lets us update the state and trigger a re-render. set functions do not have a return value.

0-2 years experience

1Imagine you need a button that toggles visibility of a paragraph in a functional component. How would you use useState to implement that?
2If you call the state updater function returned by useState with the same value as the current state, what will React do on the next render?
3What happens if you try to read a state variable directly after calling its setter within the same function?

2-5 years experience

1You added a useState hook to track a form input, but the input doesn't update when you type. What are common reasons this could happen?
2When refactoring a component that fetches data, you replace a class component's this.state with useState. What trade‑offs should you consider regarding multiple state variables versus a single object?
3During a code review you notice a component re‑renders on every keystroke even though only one piece of state changed. How would you diagnose if useState is being used efficiently?

5-8 years experience

1A list component stores its items in a useState array and frequently adds/removes items. At scale, you see performance degradation. What patterns can you apply to minimize re‑renders?
2You need to synchronize a piece of state across several sibling components without lifting state too high. How could you combine useState with other hooks or context to solve this?
3Explain how you would implement an undo/redo feature for a text editor using useState. What pitfalls regarding state immutability and closure should you watch out for?

8+ years experience

1Your team is migrating a large legacy codebase from class components to functional components with hooks. What strategy would you use to replace this.state with useState while ensuring minimal regression risk?
2In a micro‑frontend architecture, multiple independently deployed apps need to share a piece of UI state. Would you rely on useState, and if not, what alternative patterns would you propose?
3Discuss the long‑term maintenance implications of using many granular useState calls versus a single reducer (useReducer) in a complex component. When would you advocate for one over the other across teams?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.