React · Exercise 1 of 5Next
Intermediate
Stop a slow child from re-rendering
App has a counter and renders a slow Chart that logs Chart rendered every time it renders. Clicking Add re-renders Chart for nothing: it doesn't use the count.
Change the code so that clicking #add updates the count in #count but Chart renders only once (on mount). You may use memo or move the counter state into its own component.
Keep Chart on the page with its heading Monthly sales.
What Check tests
- The chart with the heading Monthly sales is on the page
- Clicking Add twice shows Count: 2
- Chart rendered only once in total
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.