One cart, two tabs: useSyncExternalStore + BroadcastChannel
Two stores stand in for two tabs. Each change is saved and broadcast; the other store replaces its copy and re-renders through useSyncExternalStore. Real apps also listen for the storage event, and signed-in carts are saved on the server.
A shop's frontend must be found by search engines, load fast on phones, keep filters shareable in the URL, keep one cart across tabs and devices, make checkout forms easy and correct, keep card data away from your own code, and measure every step of the funnel.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a price filter to the filters example: a select with Any, 100 and 150 stored as max in the URL.
Make the cart example also react to the storage event, as a real cross-tab cart would.
Explain it without notes
Why should filters live in the URL, and how do you implement it in React?
How would you render product pages for SEO and speed?
How do you keep the cart consistent across tabs and devices?
What are the security boundaries in a checkout?
What analytics would you add, and how do you keep them from hurting performance?
Preview
Console
Nothing logged yet.Expected console output
Tab B got an update: {"SKU-1":1}
Tab A got an update: {"SKU-1":1,"SKU-2":1}
Cart: 2 | Cart: 2