Transaction-first state orchestration for React

One store. One type system. Zero runtime dependencies.

React apps scatter state across too many libraries. Redux for global state. React Query for server state. React Router for navigation. Formik or React Hook Form for forms. Undo libraries. Persistence layers. Cross-tab sync. Each one has its own API, its own types, its own DevTools, and its own way of doing things.

StateMesh replaces all of that with one store, one set of types, one DevTools panel.

npm install react-statemesh

import { createMesh, StateMeshProvider, useMeshState } from "react-statemesh";

const mesh = createMesh({
  state: { count: 0 }
});

function Counter() {
  const [count, setCount] = useMeshState<number>("count");
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export function App() {
  return (
    <StateMeshProvider mesh={mesh}>
      <Counter />
    </StateMeshProvider>
  );
}

State reads use useSyncExternalStore. Updating count does not rerender components that don't read it.

Every state change in StateMesh is a transaction. This is the core idea. Whether it's a button click, an API call, a form submission, or a route transition, it goes through the same lifecycle:

Action/Mutation/Transaction
  └─ before()        → validate preconditions
  └─ optimistic()    → update UI immediately
  └─ effect()        → call API, write to disk, etc.
  └─ commit()        → apply the real result
  └─ rollback()      → undo the optimistic update on failure
  └─ retry           → exponential backoff with jitter

This means you get optimistic UI, error recovery, and rollback for free on every async operation. Not just API calls — form submissions, route transitions, and custom workflows too.

┌─────────────────────────────────────────────────────┐
│                    React Components                  │
│  useMeshState · useMeshResource · useMeshForm · ...  │
└──────────────────────┬──────────────────────────────┘
                       │ useSyncExternalStore
┌──────────────────────┴──────────────────────────────┐
│                     StateMesh Store                  │
│  state · actions · computed · transactions · forms   │
│  resources · mutations · url state · undo/redo       │
├─────────────────────────────────────────────────────┤
│  Middleware · Guards · Pipelines · Event System      │
├─────────────────────────────────────────────────────┤
│  Persistence · Tab Sync · Router · DevTools          │
└─────────────────────────────────────────────────────┘

Subscriptions are path-scoped and equality-checked. Updating cart.items does not rerender components reading theme. Computed values cache until their dependencies change. Resources deduplicate in-flight requests by key.

• README — Full API reference with examples
• CHANGELOG — Version history
• CONTRIBUTING — Development setup and workflow
• SECURITY — Vulnerability reporting policy

• Issues — Bug reports and feature requests
• Discussions — Questions and ideas
• Security Advisories — Report vulnerabilities privately

MIT — free for personal and commercial use.