Home / Blog / React Coding Interview Common Pitfalls

React Coding Interview Common Pitfalls

Published 2026-09-28 · Luna Interview

React coding interviews reward candidates who ship a working interactive UI with clear state—not those who recite hook trivia. Most failures come from a short list of pitfalls you can train away: stale state, chaotic effects, bad keys, and over-componentizing under the clock.

This guide lists React coding interview common pitfalls with fixes, talk tracks, and a practice plan.

Pitfall 1: Treating state updates as synchronous

setCount(count + 1);
setCount(count + 1); // still +1 from stale count

Fix: functional updates when next value depends on previous:

setCount(c => c + 1);

Talk track:

“I’ll use the functional updater so rapid clicks don’t drop increments.”

Pitfall 2: Derived state duplication

Storing both items and itemCount in state invites drift. Prefer:

const itemCount = items.length;

Compute during render unless the derivation is expensive—and in interviews it rarely is. If you catch yourself setItemCount beside setItems, stop and derive.

Pitfall 3: Effects that should be events

New candidates put button logic in useEffect because “something changed.” Prefer:

• Event handler → update state → render
• Effects for syncing with external systems (subscriptions, timers, network)

Smell: effect depends on a flag you set only to trigger work. That flag should have been a function call. Effects that reset state when props change can also loop—read carefully.

Pitfall 4: Missing or unstable keys

Using array index as key while reordering/filtering causes bizarre UI bugs. Prefer stable ids. If the prompt has no ids, create them when items are born.

Talk track:

“I’ll key by id so deletes don’t reuse the wrong input state.”

Pitfall 5: Stale closures in handlers and effects

A handler created once closes over old state. Fixes:

• Functional setState
• Include correct dependencies in useEffect / useCallback
• Or read from refs when you intentionally need latest without rebinding (explain why)

Do not disable the lint rule silently in an interview without justifying.

Pitfall 6: Fetching without cancellation / race handling

In timed interviews, a simple let ignore = false or abort controller shows maturity when responses can return out of order.

“If the query changes quickly, I’ll ignore stale responses.”

Keep it proportional—do not build Redux Query.

Pitfall 7: Prop drilling panic / context too early

Drilling three levels is fine in a pad. Context adds boilerplate and bugs. Reach for context only when many distant children need the same value and you have time.

Pitfall 8: Over-splitting components before it works

Extract when duplication or clarity demands it—not as a first step. A working single component beats five empty files. Interviewers can ask you to split later; they cannot ask you to finish a broken abstraction maze.

Pitfall 9: Controlled vs uncontrolled inputs

Pick controlled inputs for interview forms:

value={text} onChange={e => setText(e.target.value)}

Mixing defaultValue and value without care creates “input won’t type” bugs that burn five minutes.

Pitfall 10: Forgetting loading / empty / error UI

Even a stub helps:

“I’ll show empty state when the list is empty and a simple error string if the request fails.”

Interviewers notice completeness signals. A skeleton spinner is optional; an honest empty state is not.

Bonus pitfall: premature memoization

useMemo / React.memo everywhere reads as cargo cult. Memoize when you can name the expensive work or the broken child re-render. Otherwise ship clarity.

Freeze recovery script

1. Restate the user-visible bug
2. Identify the state field that should change
3. Log or inspect that field after the event
4. Fix the state transition; let render catch up
5. Only then touch effects/CSS

Most React freezes are state-model confusion, not JSX syntax.

First-five-minutes React pad flow

1. List interactions from the prompt
2. Name state fields on paper
3. Scaffold components lightly
4. Wire one happy path
5. Add empty/error edges

Practice plan

Soft practice note

A Chrome side panel like Luna Interview can help you rehearse calm narration while you practice React pads and freeze recovery. Use it for composure under pressure—never as a substitute for understanding React or for anything that violates interview rules.

Day-of checklist

• [ ] State fields named before coding
• [ ] Functional updates where needed
• [ ] Stable keys
• [ ] Events over unnecessary effects
• [ ] Empty / error stubs
• [ ] One happy path before abstractions

Avoid the common pitfalls on purpose; ship the boring correct tree.

Rehearse with an AI interview copilot, then browse commonly reported interview questions.