113Implement a fine-grained external state store using useSyncExternalStore without tearing

Build a tiny Zustand-style store whose components re-render only when the slice they select changes, and that is safe under concurrent rendering (no tearing).

• createStore(initialState) returns { getState, setState, subscribe }. setState(partial | updater) shallow-merges into a new state object and notifies listeners; if nothing changed (every merged key is Object.is equal), it keeps the same state and does not notify.
• useStore(store, selector = (s) => s, isEqual = Object.is) returns selector(state) using useSyncExternalStore, and re-renders only when the selection changes according to isEqual.
• shallowEqual(a, b) compares two objects or arrays one level deep.

const store = createStore({ user: { name: "Asha" }, cart: [], theme: "light" });
function CartCount() {
  const count = useStore(store, (s) => s.cart.length); // ignores theme and user changes
  return <span>{count}</span>;
}
function Header() {
  const { name, theme } = useStore(store, (s) => ({ name: s.user.name, theme: s.theme }), shallowEqual);
  return <h1 className={theme}>{name}</h1>;
}

Requirements

• A selector that builds a new object every time must not cause an infinite loop or a re-render when the selected values are equal under isEqual.
• Unsubscribe when components unmount.