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

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. ```hint 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. ``` #### 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. ```hint Measure before memoizing Think about which tool shows you which components rendered during one interaction and why, before deciding what to change. ``` #### 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 ### What a Strong Answer Covers - Accurate mechanics, with no confusion between a re-render and a DOM update - A real, specific experience told in a situation, action, result structure, with your own role clear - Fixes justified by measurement rather than blanket memoization - Awareness of correctness issues (keys, stale state, effects) as well as speed ### 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?