Quick Start

This page is the shortest path to something real. The goal is not to show every feature. It is to get one store hook on the screen, update it correctly, and point you to the next concept before the API starts to look magical.

Install the package using your preferred package manager:

npm install @ilokesto/state

1. Create a store hook

The smallest useful @ilokesto/state store starts from plain initial state.

import { create } from '@ilokesto/state';

const useCounter = create({ count: 0 });

2. Read a slice, write the full state

Selectors decide what your component reads. The returned writer still updates the full store state.

function Counter() {
  const [count, setState] = useCounter((state) => state.count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}>
        Increment
      </button>
    </div>
  );
}

That distinction is easy to miss at first. Even though the selector returns only count, the writer still receives the previous full state.

3. Move writes out of components when they stop being local

Once update logic starts to feel like an action rather than a button handler, move it behind writeOnly().

const useCounter = create({ count: 0 });

export const increment = () => {
  const setState = useCounter.writeOnly();
  setState(state => ({ count: state.count + 1 }));
};

This keeps components small and makes store behavior easier to reuse and test.

What's Next?

• Read Mental Model if you want to understand why the store lives outside React.
• Read create if you want the exact call signatures, including reducer mode.
• Read Selectors if you want the exact subscription and memoization model behind the tuple you just used.
• Read Accessors if you plan to define actions outside components.
• Read Existing Store if your app already owns a vanilla Store and only needs the hook layer.
• Read Middleware if the store needs logging, persistence, validation, or DevTools support.