What Junior React Developers Get Wrong About Talking to Interviewers

Me: How does React update the screen when state changes?

Candidate: React uses virtual DOM and Fiber, so it does
reconciliation using a diffing algorithm which is O(n),
and then it commits to the real DOM, so it is very fast
because the virtual DOM is faster than the real DOM.

Me: Why is it faster?

Candidate: Because... it is virtual.

(Every term is real. The understanding is not visible.)

Me: How does React update the screen when state changes?

Candidate: When state changes, React calls the component
again to get a new description of the UI. It compares
that with the previous description and works out the
smallest set of real DOM changes, then applies them.
That comparison is called reconciliation.

For example, if only a product's price changes, React
updates that text node and leaves the image alone.

Should I go into how keys help it match list items?

export const initialState = {
  step: 1,
  values: { name: "", email: "", plan: "basic" },
  error: null,
};

export function signupReducer(state, action) {
  switch (action.type) {
    case "change":
      return {
        ...state,
        values: { ...state.values, [action.field]: action.value },
        error: null,
      };
    case "next":
      if (state.step === 1 && !state.values.email.includes("@")) {
        return { ...state, error: "Enter a valid email" };
      }
      return { ...state, step: Math.min(state.step + 1, 3) };
    case "back":
      return { ...state, step: Math.max(state.step - 1, 1) };
    default:
      return state;
  }
}

// In the component:
// const [state, dispatch] = useReducer(signupReducer, initialState);
// dispatch({ type: "change", field: "email", value: e.target.value });

PURPOSE
'This reducer manages a three-step signup form:
which step we are on, the field values and an error.'

FLOW
'When the user types, the component dispatches a
change action with the field name and value. The
reducer returns a new state with that field updated
and clears any error. Clicking Next dispatches next.'

KEY DETAIL
'On step 1, next checks the email first. If it is
invalid, it stays on the step and sets an error
instead of moving on. All the rules live in one
place, which is why I chose useReducer over
several useState calls.'

CHECK IN
'Would you like me to show how I tested it?'

// Interviewer: 'What happens to this timer if the
// component unmounts?'

function Clock() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    // missing: return () => clearInterval(id);
  }, []);
  return <TimeDisplay value={now} />;
}

// Strong reply:
// 'Good catch. The interval keeps running after
// unmount, so it leaks and tries to update a
// component that is gone. I would return a cleanup
// that calls clearInterval(id).'

TEAM PROJECT ANSWER TEMPLATE

'This was a team of four building a college
events app.

As a team, we chose React with Vite and agreed
on a shared component folder.

I owned the event list and filters: I built the
filter bar, stored the selected filters in the URL
so links could be shared, and wrote tests for the
filter logic.

A teammate handled login, and another built the
admin forms.'

We = team decisions.  I = your work.

PLAIN-WORDS DRILL

For each term, explain it to a non-developer
in two sentences, then give a React example:

[ ] Reconciliation
[ ] Virtual DOM
[ ] Batching
[ ] Hydration
[ ] Memoisation
[ ] Props drilling
[ ] Controlled component
[ ] Side effect

Rule: you may say the term only at the END
of your explanation.

CATCH DRILL (with a partner)

1. Partner reads one of your components.
2. Partner points out any issue, real or not.
3. You reply using only this pattern:
   - 'Thanks' or 'Good catch'
   - What the issue causes
   - How you would fix it
   - (If you disagree) your reason + a question
4. Partner scores: calm? short? specific?

Repeat with five different issues.

EXPLAIN-THE-CODE DRILL

Pick one hook or component from your project.
Explain it aloud in under 90 seconds:

1. PURPOSE   - what it is for, one sentence
2. FLOW      - what triggers it, what changes
3. DETAIL    - one decision worth pointing out
4. CHECK IN  - offer a direction to go deeper

Record it. Listen for line-by-line reading
and for terms you did not explain.