React Concurrent Store

What is React Concurrent Store?

React Concurrent Store is a ponyfill that brings the experimental React concurrent store API to React 19+. It provides a simple and powerful way to manage async resources with built-in support for React’s concurrent features.

Quick Example

import { createStore, useStore } from "react-concurrent-store";
import { Suspense, use, useTransition } from "react";

// Create a store with async data
const userStore = createStore(fetch("/api/user/1").then((r) => r.json()));

function UserProfile() {
  const userPromise = useStore(userStore);
  const user = use(userPromise);
  const [isPending, startTransition] = useTransition();

  const loadNextUser = () => {
    startTransition(() => {
      userStore.update(fetch(`/api/user/${user.id + 1}`).then((r) => r.json()));
    });
  };

  return (
    <div style={{ opacity: isPending ? 0.5 : 1 }}>
      <h1>{user.name}</h1>
      <button onClick={loadNextUser}>Next User</button>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  );
}