These are the v1 docs. They are not maintained.

This page is a verbatim snapshot of the commiq 1.x documentation, kept for people still running 1.x. It is not corrected and not tested against any release. Several pages contain claims that were wrong when written: examples that do not run as printed, sealStore described as read-only when it was not, handledEvent presented as a working subscription pattern when it never matched, and effects described as swallowing only AbortError when they swallowed everything.

Do not treat anything here as a statement about how commiq 2.x behaves.

What changed in 2.0 and how to upgrade · Current documentation

Site search only indexes the current docs. Use the sidebar to browse these pages.

React Hooks

The @naikidev/commiq-react package provides hooks to integrate Commiq stores with React components.

`CommiqProvider`

Wraps a component tree and provides stores via React context. This is optional — all hooks accept stores directly as arguments, so no provider is required for typical usage. Use CommiqProvider when you need dependency injection, testing overrides, or SSR compatibility.

import { CommiqProvider } from "@naikidev/commiq-react";

const stores = {
  counter: counterStore,
  todo: todoStore,
};

function App() {
  return (
    <CommiqProvider stores={stores}>
      <MyApp />
    </CommiqProvider>
  );
}

`useSelector(store, selector)`

Subscribes to a sealed store and re-renders only when the selected value changes. Uses useSyncExternalStore under the hood.

import { useSelector } from "@naikidev/commiq-react";

function Counter() {
  const count = useSelector(counterStore, (s) => s.count);
  return <p>{count}</p>;
}

Key behaviors:

Only re-renders when the selected value changes (referential equality)
Subscribes to stateChanged builtin events

`useQueue(store)`

Returns a stable queue function for dispatching commands.

import { useQueue } from "@naikidev/commiq-react";
import { createCommand } from "@naikidev/commiq";

function IncrementButton() {
  const queue = useQueue(counterStore);

  return (
    <button onClick={() => queue(createCommand("increment", undefined))}>
      +1
    </button>
  );
}

Key behaviors:

Returns a referentially stable function (safe in dependency arrays)

`useEvent(store, eventDef, handler)`

Subscribes to a specific event on a store. Automatically cleans up on unmount.

import { useEvent } from "@naikidev/commiq-react";
import { createEvent } from "@naikidev/commiq";

const counterReset = createEvent("counter:reset");

function ResetNotifier() {
  const [msg, setMsg] = useState("");

  useEvent(counterStore, counterReset, () => {
    setMsg("Counter was reset!");
    setTimeout(() => setMsg(""), 2000);
  });

  return msg ? <p>{msg}</p> : null;
}

Key behaviors:

Uses a ref for the handler so it always calls the latest version
Cleans up on unmount — no stale listeners

Hooks

React Hooks

CommiqProvider

useSelector(store, selector)

useQueue(store)

useEvent(store, eventDef, handler)

On this page

`CommiqProvider`

`useSelector(store, selector)`

`useQueue(store)`

`useEvent(store, eventDef, handler)`