Subscribing to external stores

A cart badge that never hears about changes

Not all data lives in React state. A cart can live in a plain JavaScript module that several parts of the app import. The cart.js tab keeps the items in a variable, and the badge reads them while it renders. Click Add tea and Add cake, and watch the badge and the console.

1import { addItem, getItems } from "./cart.js";2 3function CartBadge() {4  const items = getItems();5  return <p>Cart: <strong>{items.length}</strong> items</p>;6}7 8export default function App() {9  return (10    <>11      <CartBadge />12      <button onClick={() => addItem("Tea")}>Add tea</button>13      <button onClick={() => addItem("Cake")}>Add cake</button>14    </>15  );16}

In cart.js, line 1 keeps the items, and addItem on lines 7 to 10 replaces the array with a longer one and logs the new count. In App.jsx, line 4 reads the items while CartBadge renders. The console says The cart now holds 1, then 2, but the badge still says Cart: 0 items.

React renders a component again when its state or props change, or its parent renders. The cart is none of those: it's data outside React, an external store. Nothing tells React it changed, so CartBadge never reads it again. The fix has two parts. The store has to announce changes, and React has to listen. Here is cart.js as a store that keeps a list of listeners:

let items = [];
const listeners = new Set();

export function getItems() {
  return items;
}

export function addItem(name) {
  items = [...items, name];
  listeners.forEach((listener) => listener());
}

export function subscribe(listener) {
  listeners.add(listener);
  return () => listeners.delete(listener);
}

Line 2 keeps the listeners in a Set. After each change, line 10 calls every one of them. subscribe on lines 13 to 16 adds a listener and returns a function that removes it again. That pattern is the observer pattern. And here are two components that read it with React's useSyncExternalStore. Click the buttons again.

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4function CartBadge() {5  const items = useSyncExternalStore(subscribe, getItems);6  return <p>Cart: <strong>{items.length}</strong> items</p>;7}8 9function CartList() {10  const items = useSyncExternalStore(subscribe, getItems);11  return (12    <ul>13      {items.map((name, index) => (14        <li key={index}>{name}</li>15      ))}16    </ul>17  );18}19 20export default function App() {21  return (22    <>23      <CartBadge />24      <button onClick={() => addItem("Tea")}>Add tea</button>25      <button onClick={() => addItem("Cake")}>Add cake</button>26      <CartList />27    </>28  );29}

Line 5 hands React two functions from cart.js: subscribe, so React can listen, and getItems, so React can read the current items. Line 10 does the same in CartList. Now each click updates both: Cart: 2 items, with Tea and Cake listed under the buttons. Unlike the two calls to useLocalStorage in Reusing logic with custom hooks, these components can't disagree: they both read the one cart.

Reading outside data while React renders can tear

Reading outside data while rendering, as the first CartBadge did, has a second problem besides missing changes. It appears only when React renders in pieces. Since React 18, React can split a render into slices: it renders a few components, gives the browser a moment to handle clicks and timers, then carries on. It does that for updates marked as not urgent with startTransition, so a slow list doesn't freeze the page. (The Transitions lesson covers them.)

Here is a price list whose six rows are slow on purpose. The prices.js tab keeps the price, starting at $3, and raisePriceSoon raises it to $4 after 100 ms. Click Show prices.

1import { startTransition, useState } from "react";2import { getPrice, raisePriceSoon } from "./prices.js";3 4const products = ["Tea", "Cake", "Lemonade", "Coffee", "Juice", "Water"];5 6function SlowRow({ name }) {7  const start = performance.now();8  while (performance.now() - start < 30) {9    // Pretend this row takes 30 ms to render.10  }11  const price = getPrice();12  return <li>{name}: ${price}</li>;13}14 15export default function App() {16  const [shown, setShown] = useState(false);17 18  function showPrices() {19    raisePriceSoon();20    startTransition(() => setShown(true));21  }22 23  return (24    <>25      <button onClick={showPrices}>Show prices</button>26      <ul>{shown && products.map((name) => <SlowRow key={name} name={name} />)}</ul>27    </>28  );29}

Lines 7 to 10 keep each SlowRow busy for 30 ms. (In development, StrictMode renders each component twice, so a row takes 60 ms.) Line 11 reads the price straight from prices.js. When you click, line 19 starts the 100 ms timer, and line 20 shows the rows in a transition. The list shows two prices at once: the first rows at $3 and the rest at $4, though they're one list from one render. (Which row the split falls after depends on how fast your computer is.)

This is called tearing: one screen showing two versions of the same data. React rendered a row, then paused to let the browser run, then rendered the next. The timer fired in that pause and changed the price, and React carried on with rows that read the new one. React can't know: to React, getPrice() is just a function that returned a different number.

Press Edit & run and change line 20 to setShown(true);. That update is urgent, so React renders all six rows in one go, and the timer has to wait. Every row says $3. That isn't torn, but it's wrong too: the price is $4 now, the console says so, and nothing tells React. Now the same list with each row reading the price through useSyncExternalStore:

1import { startTransition, useState, useSyncExternalStore } from "react";2import { getPrice, raisePriceSoon, subscribe } from "./prices.js";3 4const products = ["Tea", "Cake", "Lemonade", "Coffee", "Juice", "Water"];5 6function SlowRow({ name }) {7  const start = performance.now();8  while (performance.now() - start < 30) {9    // Pretend this row takes 30 ms to render.10  }11  const price = useSyncExternalStore(subscribe, getPrice);12  return <li>{name}: ${price}</li>;13}14 15export default function App() {16  const [shown, setShown] = useState(false);17 18  function showPrices() {19    raisePriceSoon();20    startTransition(() => setShown(true));21  }22 23  return (24    <>25      <button onClick={showPrices}>Show prices</button>26      <ul>{shown && products.map((name) => <SlowRow key={name} name={name} />)}</ul>27    </>28  );29}

Apart from the imports on lines 1 and 2, only line 11 changed. Click Show prices: every row says $4. React remembers the snapshot each row read. Before it puts a render made in slices on the screen, it calls getSnapshot once more. When the value has changed, as it did here, React throws that render away before showing it, and renders again in one go, with no pause for the store to change in. (Concurrent rendering, Suspense and transitions inside, near the end of the course, reads React's code for this check.) With the urgent version, every row says $4 as well: after the render, the store calls its listeners, and React renders the rows again.

Try all four combinations in the playground. Pick how the rows read the price and how the list is shown, then press Show prices. New prices are marked.

Only one combination tears: reading the price directly, in a transition. That's why React gives you a hook for outside data, rather than letting you read it while rendering. It's safe in every kind of render, today's and the ones React adds later.

useSyncExternalStore: subscribe and getSnapshot

useSyncExternalStore was added in React 18. You call it at the top level of a component or a custom hook, like any hook, with two functions, and it returns the current value:

• subscribe(listener) starts listening to the store and calls listener whenever the data changes. It returns a function that stops listening. React calls it after the component appears on the screen, and calls what it returned when the component goes away.
• getSnapshot() returns the data as it is now: the snapshot. React calls it while rendering, and again each time the listener runs. It compares the new snapshot with the last one using Object.is; a different value renders the component again, the same value doesn't.

Without this hook, you'd subscribe in an Effect and copy the value into state, the way the first useOnlineStatus in Reusing logic with custom hooks did. That works, but the first render shows the state's starting value, true, instead of the real one, and it takes more code. useSyncExternalStore reads the real value in the first render and subscribes for you.

This version of cart.js logs each subscribe and unsubscribe. Watch the console as the page starts, then click Hide list, Add tea, and Show list.

1import { useState, useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4function CartBadge() {5  const items = useSyncExternalStore(subscribe, getItems);6  return <p>Cart: <strong>{items.length}</strong> items</p>;7}8 9function CartList() {10  const items = useSyncExternalStore(subscribe, getItems);11  return <p>In the cart: {items.join(", ") || "nothing yet"}</p>;12}13 14export default function App() {15  const [listShown, setListShown] = useState(true);16  return (17    <>18      <CartBadge />19      <button onClick={() => addItem("Tea")}>Add tea</button>20      <button onClick={() => setListShown(!listShown)}>{listShown ? "Hide list" : "Show list"}</button>21      {listShown && <CartList />}22    </>23  );24}

The cart.js tab is the store from the overview, with lines 15 and 18 logging how many listeners there are. When the page starts, both components subscribe: subscribe: 1 listening, then 2. In development, StrictMode then removes them and adds them again, so you see two unsubscribes and two more subscribes. Hide list removes CartList, so React calls its unsubscribe function: unsubscribe: 1 listening. Add tea changes the badge; the hidden list hears nothing. Show list renders CartList again, and line 10 reads the cart as it is now: In the cart: Tea. Then it subscribes again, subscribe: 2 listening, and StrictMode checks that new subscription the same way: one unsubscribe, one subscribe.

React compares the subscribe function too. If you pass a different one, it unsubscribes with the old one and subscribes with the new one. A function written inside a component is a new function on every render. Click Like this shop a few times:

1import { useState, useSyncExternalStore } from "react";2import { getItems, subscribe } from "./cart.js";3 4function CartBadge() {5  const [liked, setLiked] = useState(false);6  const items = useSyncExternalStore((listener) => subscribe(listener), getItems);7  return (8    <p>9      Cart: <strong>{items.length}</strong> items{" "}10      <button onClick={() => setLiked(!liked)}>{liked ? "Liked" : "Like this shop"}</button>11    </p>12  );13}14 15export default function App() {16  return <CartBadge />;17}

Line 6 wraps subscribe in a new arrow function on every render. Each click on line 10 renders CartBadge, so the console prints unsubscribe: 0 listening and subscribe: 1 listening each time. It still works, but it does needless work, and for some stores, like a server connection, resubscribing is expensive. Declare subscribe outside the component, as cart.js does, and pass it as it is.

A snapshot stays the same until the data changes

Because React compares snapshots with Object.is, getSnapshot has one rule: while the store hasn't changed, it must return the same value every time. That's easy to break by accident. This component only wants the teas in the cart, so it filters inside getSnapshot:

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4function TeaCount() {5  const teas = useSyncExternalStore(subscribe, () =>6    getItems().filter((name) => name.endsWith("tea")),7  );8  return <p>Teas in the cart: {teas.length}</p>;9}10 11export default function App() {12  return (13    <>14      <TeaCount />15      <button onClick={() => addItem("Green tea")}>Add green tea</button>16    </>17  );18}

Lines 5 to 7 pass a getSnapshot that calls filter, and filter returns a new array every time. In development, React checks the snapshot by calling it twice in a row, and two new arrays are never Object.is equal, even when both are empty. So the console shows React's warning, The result of getSnapshot should be cached to avoid an infinite loop. Then every render finds a "new" snapshot that asks for another render, until React stops with Maximum update depth exceeded. That's the error in place of the result.

The fix is to give React the store's own array, which only changes when the cart does, and to filter it while rendering:

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4function TeaCount() {5  const items = useSyncExternalStore(subscribe, getItems);6  const teas = items.filter((name) => name.endsWith("tea"));7  return <p>Teas in the cart: {teas.length}</p>;8}9 10export default function App() {11  return (12    <>13      <TeaCount />14      <button onClick={() => addItem("Green tea")}>Add green tea</button>15      <button onClick={() => addItem("Lemon cake")}>Add lemon cake</button>16    </>17  );18}

Line 5 reads getItems, the same array until addItem replaces it. Line 6 filters it during the render, like any value worked out from state. Click Add green tea and Add lemon cake: the count says Teas in the cart: 1, and only the first click changed it.

The opposite mistake is just as quiet. A store that changes its array in place, with items.push(name), keeps returning the same array. To Object.is nothing changed, so React never renders again. That's why the cart store builds a new array on line 9 with [...items, name], as you did for state in Updating arrays in state. Exercise 1 lets you watch it happen.

How to read the table: each row is something a getSnapshot might return, whether a second call gives the same value, and what React does.

Subscribe to the browser

The browser is full of external stores: whether you're online, the window's size, whether the screen is wide or the reader prefers dark colors. Each has an event that says it changed, and a property that holds the value now. That's exactly a subscribe and a getSnapshot. Here are three custom hooks, in browser.js:

import { useSyncExternalStore } from "react";

function subscribeToNetwork(callback) {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);
  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
}

export function useOnlineStatus() {
  return useSyncExternalStore(subscribeToNetwork, () => navigator.onLine);
}

function subscribeToResize(callback) {
  window.addEventListener("resize", callback);
  return () => window.removeEventListener("resize", callback);
}

export function useWindowWidth() {
  return useSyncExternalStore(subscribeToResize, () => window.innerWidth);
}

const wideScreen = window.matchMedia("(min-width: 600px)");

function subscribeToWideScreen(callback) {
  wideScreen.addEventListener("change", callback);
  return () => wideScreen.removeEventListener("change", callback);
}

export function useIsWideScreen() {
  return useSyncExternalStore(subscribeToWideScreen, () => wideScreen.matches);
}

useOnlineStatus on lines 12 to 14 subscribes to the online and offline events (lines 3 to 10) and reads navigator.onLine, the pair you met in You might not need an effect. It has the same name and returns the same value as the one in Reusing logic with custom hooks, so components that call it don't change at all: only the hook's insides do. useWindowWidth on lines 21 to 23 listens for resize and reads window.innerWidth, a number.

useIsWideScreen uses a media query, the same test CSS uses in @media rules. Line 25 asks the browser once for a MediaQueryList for (min-width: 600px). Its matches is true or false, and it fires change when that flips (lines 27 to 30). The live example shows all three:

1import { useIsWideScreen, useOnlineStatus, useWindowWidth } from "./browser.js";2 3export default function App() {4  const isOnline = useOnlineStatus();5  const width = useWindowWidth();6  const isWide = useIsWideScreen();7 8  return (9    <ul>10      <li>Network: {isOnline ? "online" : "offline"}</li>11      <li>This page is {width}px wide</li>12      <li>Layout: {isWide ? "two columns" : "one column"}</li>13    </ul>14  );15}

Lines 4 to 6 call the three hooks. Make your browser window narrower and wider: line 11 follows the width of the result, and line 12 switches between two columns and one column at 600 pixels. To see line 10 change, turn off your Wi-Fi, or open Chrome's DevTools, go to the Network tab, and choose Offline. The pretend buttons from the last lesson wouldn't work here: they fired the events without changing navigator.onLine, and getSnapshot reads the real value.

Notice what each getSnapshot returns: a true or false, or a number. A hook that returned { width, height } would build a new object on every call, the mistake from the last section. Use one hook per number, or keep the object in a store that only replaces it on resize.

How to read the table: each row is a browser value, the event subscribe listens for, and what getSnapshot returns.

Build a tiny store

The cart store works, but every store would repeat the same listener code. A function can make stores for you, and a custom hook can read any of them. This is all a basic store needs:

import { useSyncExternalStore } from "react";

export function createStore(initialState) {
  let state = initialState;
  const listeners = new Set();
  return {
    getState() {
      return state;
    },
    setState(next) {
      state = next;
      listeners.forEach((listener) => listener());
    },
    subscribe(listener) {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
  };
}

export function useStore(store, select = (state) => state) {
  return useSyncExternalStore(store.subscribe, () => select(store.getState()));
}

createStore on lines 3 to 19 keeps one state and a set of listeners inside a closure, and returns three functions. getState returns the state. setState replaces it and calls every listener (lines 10 to 13). subscribe works like the cart's. Because the store is made once, outside any component, store.subscribe is the same function on every render.

useStore on lines 21 to 23 is a custom hook that reads a store. Its optional select picks the part a component needs, like (items) => items.length. It must return a part of the state or a plain value: a selector that builds a new object or array is the snapshot mistake again. Here it fixes the theme page from the last lesson, with a theme.js that saves every change:

import { createStore } from "./store.js";

export const themeStore = createStore(localStorage.getItem("theme") ?? "light");

themeStore.subscribe(() => {
  localStorage.setItem("theme", themeStore.getState());
});

Line 3 makes the store, starting from what localStorage holds. Lines 5 to 7 subscribe outside React: every change is saved. Now the header and the picker each call useStore(themeStore). Click Switch theme, then press Run again.

1import { useStore } from "./store.js";2import { themeStore } from "./theme.js";3 4function ShopHeader() {5  const theme = useStore(themeStore);6  return <h3>Shop header, drawn in the {theme} theme</h3>;7}8 9function ThemePicker() {10  const theme = useStore(themeStore);11  return (12    <p>13      Picker: <strong>{theme}</strong>{" "}14      <button onClick={() => themeStore.setState(theme === "light" ? "dark" : "light")}>Switch theme</button>15    </p>16  );17}18 19export default function App() {20  return (21    <>22      <ShopHeader />23      <ThemePicker />24    </>25  );26}

Both lines switch together: Shop header, drawn in the dark theme and Picker: dark. Line 14 changes the store, not a component's state, and both components hear about it. After Run again, both start dark, because line 3 of theme.js read the saved theme. Compare that with the custom hook, where each call kept its own state: a store is one state that any component can read.

Server rendering and getServerSnapshot

Frameworks like Next.js can render your components to HTML on a server, so the page shows its content before any JavaScript loads. Then, in the browser, React hydrates that HTML: it renders the same components again and takes over the elements that are already there, instead of making new ones. A server has no window, no navigator, and no localStorage, so getSnapshot can't run there:

import { renderToString } from "react-dom/server";
import App from "./App.jsx";

// On the server: no window, no navigator, no localStorage.
const html = renderToString(<App />);

Line 5 renders App to a string of HTML. If App calls useSyncExternalStore with two arguments, it throws Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering. The third argument, getServerSnapshot, gives React the value to use on the server. React also uses it in the browser while hydrating, so the first render there matches the HTML the server sent. Then it reads getSnapshot and renders again if the value differs.

This example is a page whose HTML came from a server: the index.html tab already holds Measuring the page... inside #root. Read the console under the result.

1import { useSyncExternalStore } from "react";2import { hydrateRoot } from "react-dom/client";3 4function subscribeToResize(callback) {5  window.addEventListener("resize", callback);6  return () => window.removeEventListener("resize", callback);7}8 9function useWindowWidth() {10  return useSyncExternalStore(11    subscribeToResize,12    () => window.innerWidth,13    () => null,14  );15}16 17function App() {18  const width = useWindowWidth();19  console.log(`Render with width ${width}`);20  return <p>{width === null ? "Measuring the page..." : `This page is ${width}px wide`}</p>;21}22 23hydrateRoot(document.getElementById("root"), <App />);

Line 13 is getServerSnapshot: null, meaning "not measured yet", which is what the server rendered with. Line 23 calls hydrateRoot instead of createRoot, so React takes over the existing HTML. The console shows Render with width null: the first render matches the HTML exactly. Then Render with width and a number, and the page shows the real width. The value from the server must be the same on both sides; a server snapshot that guessed a width would draw a different page from the HTML.

Press Edit & run and delete line 13. Now hydration has no server snapshot, and the result shows the error React reports: There was an error while hydrating but React was able to recover by instead client rendering the entire root. React did recover: the console shows one Render with width line with a number, from a render in the browser. But it dropped the server's HTML and built the whole page again, so the work server rendering was for is lost. Code at the top of a module runs on the server too: line 25 of browser.js calls window.matchMedia when the file loads, so in a server-rendered app, move it inside subscribe and getSnapshot.

A shop header that reads three outside sources

A real header reads several stores at once. This one shows the cart count from a store made with createStore, a delivery note only on wide screens, and a warning when you're offline. Click the buttons, and make the window narrower.

1import { useStore } from "./store.js";2import { addToCart, cartStore } from "./cart.js";3import { useIsWideScreen, useOnlineStatus } from "./browser.js";4 5function ShopHeader() {6  const itemCount = useStore(cartStore, (items) => items.length);7  const isOnline = useOnlineStatus();8  const isWide = useIsWideScreen();9 10  return (11    <header>12      <strong>Tea Shop</strong>13      {isWide && <span> · Free delivery over $20</span>}14      <p>Cart: {itemCount}{!isOnline && " (offline: saved on this device)"}</p>15    </header>16  );17}18 19export default function App() {20  return (21    <>22      <ShopHeader />23      <button onClick={() => addToCart("Tea")}>Add tea</button>24      <button onClick={() => addToCart("Cake")}>Add cake</button>25    </>26  );27}

Line 6 reads the cart with a selector that returns a number, so the header renders only when the count changes. Lines 7 and 8 use the browser hooks from browser.js. The buttons on lines 23 and 24 call addToCart in the cart.js tab, which replaces the array with setState. Nothing in App passes data down: each piece comes from its store.

Common mix-ups

• "useSyncExternalStore is a better useState." No. It's for data that lives outside React. State that belongs to a component stays in useState or useReducer.
• "React compares what's inside two snapshots." No. It uses Object.is: two new arrays with the same items are different, and one array changed in place is the same.
• "Reading a module variable while rendering is fine if I re-render often." No. It can tear during a transition, and it never re-renders by itself when the value changes.
• "Tearing happens all the time in React apps." No. It needs a render made in slices and a value that changes between them. useSyncExternalStore rules it out.
• "React calls subscribe on every render." Only when you pass a new function. Declare it outside the component and React subscribes once per component.
• "A shared store needs a library." No. createStore is under 20 lines. Libraries add features like selectors, middleware, and dev tools.

Practice exercises

Each exercise shows its result under the code, with the console under it. Press Edit & run to change the code, and open the other tabs to change the stores. Make a guess first, then use the hints.

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4function CartBadge() {5  const items = useSyncExternalStore(subscribe, getItems);6  return <p>Cart: <strong>{items.length}</strong> items</p>;7}8 9export default function App() {10  return (11    <>12      <CartBadge />13      <button onClick={() => addItem("Tea")}>Add tea</button>14    </>15  );16}

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4function CartBadge() {5  const items = useSyncExternalStore(subscribe, getItems);6  return <p>Cart: <strong>{items.length}</strong> items</p>;7}8 9export default function App() {10  return (11    <>12      <CartBadge />13      <button onClick={() => addItem("Tea")}>Add tea</button>14    </>15  );16}

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4function CartBadge() {5  const items = useSyncExternalStore(subscribe, getItems);6  return <p>Cart: <strong>{items.length}</strong> items</p>;7}8 9export default function App() {10  return (11    <>12      <CartBadge />13      <button onClick={() => addItem("Tea")}>Add tea</button>14    </>15  );16}

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4function CartBadge() {5  const items = useSyncExternalStore(subscribe, getItems);6  return <p>Cart: <strong>{items.length}</strong> items</p>;7}8 9export default function App() {10  return (11    <>12      <CartBadge />13      <button onClick={() => addItem("Tea")}>Add tea</button>14    </>15  );16}

1export default function App() {2  const visibility = document.visibilityState;3  console.log(`Render: ${visibility}`);4  return <p>This tab is {visibility}</p>;5}

1import { useSyncExternalStore } from "react";2 3function subscribeToVisibility(callback) {4  document.addEventListener("visibilitychange", callback);5  return () => document.removeEventListener("visibilitychange", callback);6}7 8function useVisibility() {9  return useSyncExternalStore(subscribeToVisibility, () => document.visibilityState);10}11 12export default function App() {13  const visibility = useVisibility();14  console.log(`Render: ${visibility}`);15  return <p>This tab is {visibility}</p>;16}

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4const prices = { Tea: 3, Cake: 4 };5 6function CartSummary() {7  const summary = useSyncExternalStore(subscribe, () => ({8    count: getItems().length,9    total: getItems().reduce((sum, name) => sum + prices[name], 0),10  }));11  return <p>{summary.count} items, total ${summary.total}</p>;12}13 14export default function App() {15  return (16    <>17      <CartSummary />18      <button onClick={() => addItem("Tea")}>Add tea</button>19      <button onClick={() => addItem("Cake")}>Add cake</button>20    </>21  );22}

1import { useSyncExternalStore } from "react";2import { addItem, getItems, subscribe } from "./cart.js";3 4const prices = { Tea: 3, Cake: 4 };5 6function CartSummary() {7  const items = useSyncExternalStore(subscribe, getItems);8  const total = items.reduce((sum, name) => sum + prices[name], 0);9  return <p>{items.length} items, total ${total}</p>;10}11 12export default function App() {13  return (14    <>15      <CartSummary />16      <button onClick={() => addItem("Tea")}>Add tea</button>17      <button onClick={() => addItem("Cake")}>Add cake</button>18    </>19  );20}

1import { startTransition, useState } from "react";2import { getPrice, raisePriceSoon } from "./prices.js";3 4const products = ["Tea", "Cake", "Lemonade", "Coffee", "Juice", "Water"];5 6function SlowRow({ name }) {7  const start = performance.now();8  while (performance.now() - start < 30) {9    // Pretend this row takes 30 ms to render.10  }11  const price = getPrice();12  return <li>{name}: ${price}</li>;13}14 15export default function App() {16  const [shown, setShown] = useState(false);17 18  function showPrices() {19    raisePriceSoon();20    startTransition(() => setShown(true));21  }22 23  return (24    <>25      <button onClick={showPrices}>Show prices</button>26      <ul>{shown && products.map((name) => <SlowRow key={name} name={name} />)}</ul>27    </>28  );29}

1import { startTransition, useState, useSyncExternalStore } from "react";2import { getPrice, raisePriceSoon, subscribe } from "./prices.js";3 4const products = ["Tea", "Cake", "Lemonade", "Coffee", "Juice", "Water"];5 6function SlowRow({ name }) {7  const start = performance.now();8  while (performance.now() - start < 30) {9    // Pretend this row takes 30 ms to render.10  }11  const price = useSyncExternalStore(subscribe, getPrice);12  return <li>{name}: ${price}</li>;13}14 15export default function App() {16  const [shown, setShown] = useState(false);17 18  function showPrices() {19    raisePriceSoon();20    startTransition(() => setShown(true));21  }22 23  return (24    <>25      <button onClick={showPrices}>Show prices</button>26      <ul>{shown && products.map((name) => <SlowRow key={name} name={name} />)}</ul>27    </>28  );29}

1import { useStore } from "./store.js";2import { addToCart, cartStore } from "./cart.js";3 4export default function App() {5  const itemCount = useStore(cartStore, (items) => items.length);6  return (7    <>8      <p>Cart: {itemCount} items</p>9      <button onClick={() => addToCart("Tea")}>Add tea</button>10      <button onClick={() => addToCart("Cake")}>Add cake</button>11    </>12  );13}

1import { useStore } from "./store.js";2import { addToCart, cartStore } from "./cart.js";3 4export default function App() {5  const itemCount = useStore(cartStore, (items) => items.length);6  return (7    <>8      <p>Cart: {itemCount} items</p>9      <button onClick={() => addToCart("Tea")}>Add tea</button>10      <button onClick={() => addToCart("Cake")}>Add cake</button>11    </>12  );13}

Check your understanding

Key takeaways

• Data outside React, like a module, a browser API, or a shared store, doesn't make components render when it changes.
• Read it with useSyncExternalStore(subscribe, getSnapshot): React listens, reads a snapshot in each render, and renders again when it differs.
• Reading it directly can tear during a transition: two parts of one screen show different versions. The hook rules that out.
• getSnapshot returns the same value until the data changes: never a new object or array per call, and never an array changed in place.
• Declare subscribe outside the component, or React resubscribes after every render.
• A tiny store is a state, a set of listeners, and three functions. Give server rendering a getServerSnapshot.

Coming next: Fetching data. It starts the next stage: loading data from a server in an Effect, without race conditions, and why apps reach for a data library or framework.