React Rendering and Reconciliation Quiz
Four drills on React's virtual DOM, the reconciliation diffing algorithm, and why stable list keys matter so much.
Question Bank
Medium
JavaScript
4 questions
quiz
react
reconciliation
interview-prep
532 views
15
What is the virtual DOM and why does React maintain one instead of writing to the DOM on every state change? Sketch the cycle in pseudocode.
Sketch the two big assumptions React's diffing algorithm makes to stay O(n). Show a snippet that triggers the bad path because of unstable keys.
function Bad({ items }) {
return (
<ul>
{items.map((it, i) => <li key={Math.random()}>{it}</li>)}
</ul>
);
}This list loses input focus and state every time the user reorders rows. Why? Fix the keys.
function TodoList({ todos }) {
return (
<ul>
{todos.map((t, i) => (
<li key={i}>
<input defaultValue={t.text} />
</li>
))}
</ul>
);
}When is using the array index as a key actually safe? Give one concrete example and one concrete counter-example.