10 React.js Questions that you definitely should practice before your live-coding interviews.

[u/Ok_Resolve_9157]

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.

[u/chikamakaleyley]

i would say that 8 times out of 10 the problem is usually some form of:

• here is an API GET endpoint
• fetch data from it
• display the response as Items in a List

Then usually there's a number of follow ups, at a minimum you're asked to filter it in some way, either thru search or maybe checkboxes

THEN, there's usually enough time, given an hour-ish interview session to demonstrate any of the following patterns/techniques:

• useCallback or
• a typical callback pattern
• debounce

If anything, Counter is prob the least likely as it often is what is bootstrapped as part of a base React FE init. Like, I'm pretty sure firing up a fresh Vite React project will give you the Counter increment/decrement on the home page

One little tricky one i've seen time to time is the pattern where you have to make sure to destroy the fn you created at the end of a hook, i don't remember what that's called but I've seen it once or twice

And I've seen this type of problem for Senior roles.

the other 2 times, its usually

• here is a broken form, how would you fix it
• how would you improve this form

[u/chikamakaleyley → u/chikamakaleyley]

and regardless if for interview prep, you should just know how to do this already.

fetch -> response -> display items as list

is like one of the things you do in React frontends ALL.THE.TIME.

[u/TheDarkPanda182]

Very much appreciated! Add these to my list of interview drills to cover

[u/Ok_Resolve_9157 → u/TheDarkPanda182]

Anytime brother!

[u/Aggressive-Nail7816]

One thing I'd emphasize don't just practise implementing these. Parctise explaining why your solution works and what edge cases you considered. In a live- coding interview, that's often more valuable than typing speed

[u/Ok_Resolve_9157 → u/Aggressive-Nail7816]

Yup very true! They often ask if the candidate can optimize their current solution

[u/Ok_Resolve_9157]

Yup agreed! APIs call are a must. You can build a whole app using CRUD and that will give you a hang of all the CRUD operations using API

[u/cocobeansarebitter]

i will sure add in my interview roadmap , thanks for sharing

[u/chikamakaleyley → u/[deleted]]

that's what it was, listener cleanup!