Intermediate
Build an external store with selectors
Finish createStore so it returns getState, setState(update) (where update is a function from the old state to the changed fields, merged into a new state object) and subscribe(listener) (which returns an unsubscribe function).
Finish useStore(selector) with useSyncExternalStore, so a component re-renders only when its selected value changes.
The page must show the likes count in id="likes" and the author in id="author". Button id="like" adds one like; button id="rename" sets the author to Ravi. Likes already logs render Likes on every render: renaming must not re-render it.
What Check tests
- The page starts with 0 likes by Asha
- Clicking Like updates the screen
- Rename shows Ravi
- Renaming does not re-render
Likes - Uses
useSyncExternalStore
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.