List some good practices while using state

1
If the value you need can be computed entirely from the current props or other state, remove that redundant state altogether.
2
If you’re worried about recomputing too often, the useMemo Hook can help.
3
If you want to reset the entire component tree’s state, pass a different key to your component.
4
If you can, update all the relevant state in the event handlers.

Difficulty: 5/10

Topics: state immutability, lifting state, global state management

0-2 years experience

1
How would you initialize a piece of state that depends on a prop value, and why would you choose that approach?
2
If you notice a component re‑rendering twice after a button click that updates state, what could be causing it and how would you fix it?
3
When you need to update an object in state, how would you do it to avoid mutating the original state?

2-5 years experience

1
You’re adding a form with multiple input fields that share validation state. How would you structure the state, and what trade‑offs does your approach have?
2
During a sprint you discover that a component’s state is causing a memory leak when a subscription isn’t cleaned up. Walk me through how you’d debug and resolve it.
3
Explain why lifting state up to a parent caused a performance regression in a list component, and how you’d address it.

5-8 years experience

1
Our dashboard renders thousands of rows with per‑row expand/collapse state. How would you design the state management to keep the UI responsive?
2
We’re migrating from local component state to a global store. What criteria would you use to decide which pieces of state to move, and how would you ensure consistency?
3
Describe how you’d prevent unnecessary re‑renders when multiple components read the same slice of state, considering memoization and selector patterns.

8+ years experience

1
Across several teams we have duplicated state handling logic for feature toggles. How would you create a shared, scalable solution while minimizing coupling?
2
Our legacy codebase mixes class component state, Redux, and React Context. Outline a migration plan to unify state management, addressing backward compatibility and developer onboarding.
3
When designing a library of reusable UI components, what conventions would you enforce for internal state vs. controlled props to ensure composability and testability?