5 hands-on exercises and 5 find-the-bug challenges for the Avoiding Unnecessary Renders lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Hold the counter in the child that needs it.
Let the heavy part come in as children so it is not rebuilt.
Compute the doubled value instead of keeping it in state.
Memoise the object so its identity does not change every render.
Move the changing part into its own component.
The stored double never follows the count.
A fresh object each render makes the memo useless and the label stale.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThe counter lives in the parent but only the child uses it.
The static part should be passed in, not recreated from state.
Move the changing state into its own component.