Premature memo versus moving state down
The broken page pays for memo and useMemo and still re-renders the chart on every keystroke, because { color: "teal" } is a new object each time. The fixed page has no memoisation at all, and the chart never re-renders: the typing state lives in SearchBox, which isn't the chart's parent.
Six mistakes show up in almost every React codebase: copying props into state, chains of effects that set state, index keys on lists that change, giant components, drilling every prop everywhere, and memoising by reflex; each has a small, well-known fix taught earlier in this course.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Refactor: function Price({ amount, rate }) { const [converted, setConverted] = useState(0); useEffect(() => { setConverted(amount * rate); }, [amount, rate]); return <span>{converted.toFixed(2)}</span>; }
This list uses key={i} and each row has a checkbox with local state. Items can be sorted. What breaks, and how do you fix it?
Explain it without notes
Why is copying a prop into state a bug, and what are the fixes?
What is wrong with a chain of effects that set state, and how do you refactor it?
Why do index keys cause bugs, and when are they acceptable?
How would you approach memoisation in a React codebase?
Preview
Console
Nothing logged yet.Expected console output
ChartBroken rendered
Chart rendered
--- typing 3 letters in each
ChartBroken rendered
ChartBroken rendered
ChartBroken rendered