Katkat
Back

Explain React Rendering and How You Fixed a Re-render Problem

eBaySoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

A frontend experience discussion about React rendering: explain what triggers a render, the render and commit phases, reconciliation and keys, then walk through a rendering performance problem you diagnosed and fixed. It tests accurate React mechanics, measurement-driven optimization and clear communication of past work.

Besides the coding question, the interview covered your relevant frontend work experience, with a focus on React rendering. Choose a React application you have worked on and use it to explain how React renders, then describe a rendering problem you diagnosed and fixed in it.

Clarifying Questions

  • Which React version and rendering setup should the discussion assume, for example a client-rendered app on React 18 or later, or one with server rendering?
  • Should the answer cover only client-side rendering, or also server rendering and hydration?
  • Is the interviewer more interested in the internal mechanics, or in the practical performance work you did?

Part 1 — How React renders

Explain what causes a component to render, what happens in the render phase and in the commit phase, how React decides which DOM changes to make, and the role of keys in lists.

What This Part Should Cover

  • What triggers a render, including the triggers that surprise people
  • Render phase versus commit phase, and when effects run
  • How reconciliation compares the old and new element trees, including element types and keys
  • How React batches state updates

Part 2 — A rendering problem from your experience

Describe a situation in that application where rendering caused a performance or correctness problem: how you noticed it, how you found the cause, what you changed, and how you verified the result.

What This Part Should Cover

  • A concrete symptom and how it was measured
  • The root cause, explained with the mechanics from Part 1
  • The fix and its trade-offs, with a before-and-after measurement
  • What you learned or would watch for next time

Hints

Hint 1

Render is not paint: Separate React calling your component functions from React changing the DOM, and ask what has to happen between those two steps.

Hint 2

Measure before memoizing: Think about which tool shows you which components rendered during one interaction and why, before deciding what to change.

Follow-up questions

  • A context provider holds a frequently changing value and has many consumers. What renders when the value changes, and how would you restructure it?
  • When does `React.memo` or `useMemo` make no difference, or make things slower?
  • A list uses array indices as keys, and items can be reordered or deleted. What bugs can appear, and why?
  • What changes with server rendering and hydration, and what causes a hydration mismatch?