Why Some React Developer Candidates Ace Every Round Except the Last

Manager: Why did you pick React Query for data fetching?

Candidate: Because it is the best library for server
state. It has caching and it is very popular.

Manager: Did you consider anything else?

Candidate: No, React Query is the standard now.

(Correct facts, but no sign of a decision.)

Manager: Why did you pick React Query for data fetching?

Candidate: At first I fetched in useEffect on each page.
The product list was fetched again every time a user
came back from the detail page, and I had loading
flags in four components. React Query gave me caching
and one place for loading and error state.

The cost was another dependency and learning its
cache rules. For a two-page app I would not add it.

SITUATION
In my expense tracker, users lost a half-filled form
when they switched tabs on mobile and the page reloaded.

ACTION
I reproduced it on a phone, then saved the draft to
localStorage on change (debounced) and restored it
on mount. I cleared the draft after a successful save.

RESULT
The draft now survives a reload. I added a test that
fills the form, remounts the component and checks the
values are still there.

LEARNING
I now test forms on a real phone before calling them done.

import { useEffect, useState } from "react";

export function useDraft(key, initial) {
  const [value, setValue] = useState(() => {
    try {
      const saved = localStorage.getItem(key);
      return saved ? JSON.parse(saved) : initial;
    } catch {
      return initial;
    }
  });

  useEffect(() => {
    const id = setTimeout(() => {
      try {
        localStorage.setItem(key, JSON.stringify(value));
      } catch {
        /* storage full or blocked: keep working in memory */
      }
    }, 400);
    return () => clearTimeout(id);
  }, [key, value]);

  const clear = () => localStorage.removeItem(key);
  return [value, setValue, clear];
}

CHOICE   -> "I chose Context for the theme and user."
GIVES    -> "It kept the setup small; no new library."
COSTS    -> "Every consumer re-renders when it changes."
LIMIT    -> "That is fine because the theme rarely changes.
If we had fast-changing data like a live cart across
many screens, I would look at Zustand or Redux Toolkit."

Spoken calmly, this takes about 30 seconds and
sounds decisive, not unsure.

Good closing questions for a React final round:

- How does the team decide on new libraries?
- What does code review look like here?
- How are UI bugs reported and prioritised?
- What would a new React developer own first?
- How do designers and developers work together?

Avoid ending with only salary or leave questions.
Those matter, but they belong in the HR discussion.

STORY BANK (one line each, details in notes)

1. A technical decision I made:
   ______________________________________
2. A mistake I owned and fixed:
   ______________________________________
3. A disagreement handled well:
   ______________________________________
4. Something I learned quickly:
   ______________________________________
5. A time I helped someone:
   ______________________________________
6. A time I cut scope to meet a deadline:
   ______________________________________

FOR EACH STORY

Situation (1-2 lines): __________________
Task (what you had to do): ______________
Action (what YOU did, with React detail):
  - ____________________________________
  - ____________________________________
Result (what changed, how you checked): __
Learning (what you do differently now): __

Time it: aim for 60-90 seconds aloud.

THE DAY BEFORE

[ ] Research the product: use it, note one UX detail
[ ] Prepare three trade-offs from your projects
[ ] Rehearse two STAR stories aloud
[ ] Prepare 3 questions for the manager
[ ] Know why you want this role, in 2-3 sentences
[ ] Re-read your earlier round notes: what did they
    ask, and what could you answer better now?