Quick Start

React State Management in 2 Minutes

Learn how to use qortex-store-react to manage state in React components.

qortex-store-react re-exports everything from qortex-store, so you only need one import.

1. Create a Store

Define your store — import `createStore` directly from `qortex-store-react`:

1. Create a Store

import { createStore } from 'qortex-store-react';

const counterStore = createStore((set, get) => ({
  count: 0,
  increment: () => set({ count: get().count + 1 }),
  decrement: () => set((s) => ({ count: s.count - 1 })),
  reset: () => set({ count: 0 }),
}));

2. Create a Bound Hook (Recommended)

For better ergonomics, create a specialized hook for your store using `createUseStore`. This avoids passing the store as an argument to every hook call.

2. Create a Bound Hook (Recommended)

import { createUseStore } from 'qortex-store-react';

// Create a specialized hook
export const useCounter = createUseStore(counterStore);

3. Use in a Component

Use your bound hook with a selector to subscribe to specific state slices:

3. Use in a Component

function Counter() {
  const count = useCounter((s) => s.count);
  const increment = useCounter((s) => s.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

Alternative: Using base useStore

You can also use the base `useStore` hook by passing the store instance directly:

Alternative: Using base useStore

import { useStore } from 'qortex-store-react';

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