Intermediate
Read an outside store with useSyncExternalStore
The page has a plain DOM button (id="outside", not React) that changes themeStore, a tiny store written outside React with getTheme(), toggle() and subscribe(listener).
Write useTheme() with useSyncExternalStore so that both Label (id="label", text Theme: light or Theme: dark) and Card (id="card", class light or dark) update whenever the outside button is clicked.
What Check tests
- It starts light
- Clicking the outside button updates the label
- The card updates too
- A second click goes back to light everywhere
useThemeusesuseSyncExternalStore
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.