With Tap's useResource, a component owns its resource directly:

const Counter = () => {
  const { count, increment } = useResource(CounterResource());
  return <button onClick={increment}>{count}</button>;
};

This works when the component that creates the state is the same one that displays it. But what happens when they're far apart?

The gap#

In most apps, state is created near the top of the tree and consumed deep inside it. A chat app creates its thread state at the root, but individual messages render many layers down.

App ← owns the thread
  └ Layout
    └ Sidebar
      └ ChatPanel
        └ MessageList
          └ Message ← needs the thread's data

You could prop-drill or set up your own React Context. Store does this for you.

How Store bridges the gap#

// At the top — create and provide
const App = () => {
  const config = AuiConfig({ thread: ThreadResource() });
  return (
    <AuiProvider config={config}>
      <Layout />
    </AuiProvider>
  );
};

// Anywhere below — consume
const Message = () => {
  const isRunning = useAuiState((s) => s.thread.isRunning);
  return <p>{isRunning ? "Running" : "Idle"}</p>;
};

AuiProvider creates the state from its config and makes it available to the tree. useAuiState reads from it — the component re-renders only when the selected value changes.