Reset state with a key instead of an effect
The script types a comment for user 1, then switches user. Because the key changed, React mounted a fresh Profile and the draft didn't leak to user 2. Remove key={userId} and the comment would stay.
If no outside system is involved, you usually don't need an effect: calculate derived data during render (with useMemo if it's slow), reset state with a key, put user-caused logic in event handlers, and run app-wide setup once at module level.
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.
Remove the effect:
``jsx
function Cart({ items }) {
const [total, setTotal] = useState(0);
useEffect(() => {
setTotal(items.reduce((s, i) => s + i.price, 0));
}, [items]);
return <p>Total: {total}</p>;
}
A <ChatThread threadId={id} /> keeps a draft and a scrollTop in state, and both must reset when the thread changes. Show the fix in the parent.
Explain it without notes
Why is storing derived data in state and updating it with an effect a mistake?
How do you reset all of a component's state when a prop changes, without an effect?
A child calls onChange from an effect when its state changes. What's wrong, and what's the fix?
Where should code go that must run exactly once when the app loads?
Preview
Console
Nothing logged yet.Expected console output
user 1 comment: "Great work!"
user 2 comment: ""