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

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.

Difficulty: 2/10

Topics: state management, functional components, hooks

0-2 years experience

1
Imagine you need a button that toggles visibility of a paragraph in a functional component. How would you use useState to implement that?
2
If 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?
3
What happens if you try to read a state variable directly after calling its setter within the same function?

2-5 years experience

1
You 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?
2
When 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?
3
During 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

1
A 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?
2
You 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?
3
Explain 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

1
Your 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?
2
In 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?
3
Discuss 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?

❓What would you do if the UI didn't update after calling the setter?
❓How does React decide whether to re‑render when the state value hasn't changed?
❓Can you compare useState with class component this.state in terms of lifecycle?