If you have a React interview coming up, then this might be of some help to you!
Here are 10 problem lists that you can consider practicing to brush up your react.js concepts before your machine coding round.
1. Counter with increment, decrement, and reset. (Might be the ice-breaker for freshers but rarely asked for experienced role)
Feels too easy to be a real question. But a fast-click test on the increment button often catches people using the wrong kind of state update.
Practice counter here
2. Build your own debounce hook. (Definitely Practice this one)
It must wait until the value stops changing for a bit, cancel any pending timer if the component unmounts, and handle the delay itself changing partway through.
Debouncing Practice
3. Return the value from one render ago.
Sounds simple. What people miss: it must return undefined on the first render, and it can't cause an extra re-render by itself.
Practice Hook
4. Shopping cart with useReducer. (Please do practice useReducer hook, I was asked to build a form entirely using useReducer + will also be useful when you deal with Redux)
Add, change quantity, remove, clear — four actions through one reducer. Good test of whether you use useReducer or just keep adding more useState.
Build Shopping cart
(Frontend Mentor has a plain HTML/CSS/JS version if you want to compare)
Build Shopping cart from frontend mentor
5. Traffic light that cycles on its own. (Great for clearing the concept of clearing intervals and timeouts)
The layout is already built — you just write the timing. It usually breaks on cleanup: clearing the interval when the component unmounts or re-renders.
Manage traffic light problem
6. Search box where slow responses can't overwrite fast ones.
A classic race condition. If a request fires on every keystroke, an old slow response can arrive after a newer one and overwrite it with stale data.
Solve this
7. Nested comment thread, replies inside replies. (If you want to move to advance concepts)
Needs a component that renders itself for each nested reply, plus a function that can find and update one comment anywhere in the tree without mutating it.
Build nested comment in react
8. Stop a list from re-rendering rows that didn't change. (Must practice, you'll definitely be asked about optimization in react, do go through the concept of useCallback)
Right now, an unrelated counter on the page makes every row re-render. Fix it with React.memo — it has to actually stop the re-renders, not just look fine.
Practice Memoization in react
9. Keep a callback's identity stable across renders.
Three counters currently all re-render on any single click, because their click handlers get recreated every render. Needs useCallback plus the functional setState form — using only one of the two still fails.
Practice useCallback
10. Multi-step signup form with useReducer.
Account info → profile → review. Each step is validated before you can hit Next, and going back can't lose what you already typed.
Form validation using useReducer
(Frontend Mentor has a version of this same idea, no React needed: Multi step form)
Curious what else people have been asked in these rounds — feels like everyone gets a slightly different mix of the same problems.
Please let me know in the comments your thoughts and do share what according to you are some must go through concepts before any react interview, I'm preparing a notion docs on the list of react interview questions, so will add it there so that it can be useful for everyone.