Mirrored props: broken versus reset with a key
The two components are identical. The only difference is key={user.id} on the fixed one: a new key makes React throw the old state away and start again from the new prop. The components are the same because the fix is in how the parent uses it.
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
Selected Ben -> broken shows Asha | fixed shows Ben