Intermediate
Stop needless context re-renders
Profile and LogoutButton log a line every time they render. Right now any click in App, even the unrelated counter, re-renders both, because the context value is a new object on every render.
Fix it so that: clicking Unrelated clicks (#bump) renders neither of them; clicking Rename to Ravi (#rename) renders Profile but not LogoutButton; and Log out (#logout) still signs the user out.
Hint for the second rule: LogoutButton must not read a context whose value changes when the user changes. Keep the console.log lines as they are.
What Check tests
- Both components render once at the start
- The unrelated button renders neither of them
- Renaming renders Profile but not LogoutButton
- Log out still works
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.