TanStack Store

https://tanstack.com/store/latest/docs
Admin
TanStack Store is a lightweight, framework-agnostic state management library for building reactive...
Tokens:24,289
Snippets:229
Trust Score:10
Update:4 months ago
Show doc for...
Tokens:
Raw
### Example Usage of useCreateStore

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useCreateStore.md

A basic example demonstrating how to create a store using the useCreateStore hook with an initial value.

```tsx
const counterStore = useCreateStore({ count: 0 })

```

--------------------------------

### Install TanStack Store for SolidJS

Source: https://tanstack.com/store/latest/docs/installation.md

Install the SolidJS adapter for TanStack Store using npm. Compatible with Solid and SolidStart.

```sh
npm install @tanstack/solid-store
```

--------------------------------

### useStore Examples

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useStore.md

Demonstrates how to use the _useStore hook with stores that have actions and with plain stores.

```tsx
// Store with actions
const [cats, { addCat }] = _useStore(petStore, (s) => s.cats)

// Store without actions
const [count, setState] = _useStore(plainStore, (s) => s)
setState((prev) => prev + 1)
```

--------------------------------

### Install TanStack Store for Preact

Source: https://tanstack.com/store/latest/docs/installation.md

Install the Preact adapter for TanStack Store using npm. Compatible with Preact 10+.

```sh
npm install @tanstack/preact-store
```

--------------------------------

### Install TanStack Store for Svelte

Source: https://tanstack.com/store/latest/docs/installation.md

Install the Svelte adapter for TanStack Store using npm. Compatible with Svelte 5.

```sh
npm install @tanstack/svelte-store
```

--------------------------------

### React Store Setup and Component Usage

Source: https://tanstack.com/store/latest/docs/framework/react/examples/stores

This snippet shows the basic setup of a module-level store and its usage within React components. It includes `useSelector` for reading state slices and `setState` for direct updates. Ensure the store is defined and imported correctly.

```tsx
import { createStore, useStore } from '@tanstack/store';
import React from 'react';
import ReactDOM from 'react-dom';

interface PetState {
  cats: number;
  dogs: number;
}

const petStore = createStore<PetState>({
  cats: 0,
  dogs: 0,
});

const useSelector = useStore;

function CatsCard() {
  // read state slice (only re-renders when the selected value changes)
  const value = useSelector(petStore, (state) => state.cats);
  return (
    <div>
      Cats: {value}
    </div>
  );
}

function DogsCard() {
  // read state slice (only re-renders when the selected value changes)
  const value = useSelector(petStore, (state) => state.dogs);
  return (
    <div>
      Dogs: {value}
    </div>
  );
}

function StoreButtons() {
  return (
    <div>
      <button
        onClick={() => {
          petStore.setState((prev) => ({ ...prev, cats: prev.cats + 1 }));
        }}
      >
        Add cat
      </button>
      <button
        onClick={() => {
          // directly update values in the store
          petStore.setState((prev) => ({ ...prev, dogs: prev.dogs + 1 }));
        }}
      >
        Add dog
      </button>
    </div>
  );
}

function TotalCard() {
  const total = useSelector(petStore, (state) => state.cats + state.dogs);
  return (
    <div>
      Total votes: {total}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root')!);

root.render(
  <React.StrictMode>
    <CatsCard />
    <DogsCard />
    <StoreButtons />
    <TotalCard />
  </React.StrictMode>
);
```

--------------------------------

### Install TanStack Store for React

Source: https://tanstack.com/store/latest/docs/installation.md

Install the React adapter for TanStack Store using npm. Requires React v16.8+.

```sh
npm install @tanstack/react-store
```

--------------------------------

### React Store Initialization and Rendering

Source: https://tanstack.com/store/latest/docs/framework/react/examples/store-actions

This snippet shows the basic setup for initializing the React application and rendering the store components. Ensure `ReactDOM` is imported and the root element is correctly selected.

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { CatVoter, DogVoter, TotalCard } from './components';
import { petStore } from './store';

const root = ReactDOM.createRoot(document.getElementById('root')!);

root.render(
  <React.StrictMode>
    <CatVoter />
    <DogVoter />
    <TotalCard />
  </React.StrictMode>
);
```

--------------------------------

### Install TanStack Store for Angular

Source: https://tanstack.com/store/latest/docs/installation.md

Install the Angular adapter for TanStack Store using npm. Compatible with Angular 19+.

```sh
npm install @tanstack/angular-store
```

--------------------------------

### Install TanStack Store for Vue

Source: https://tanstack.com/store/latest/docs/installation.md

Install the Vue adapter for TanStack Store using npm. Compatible with Vue 2 and 3.

```sh
npm install @tanstack/vue-store
```

--------------------------------

### get() Method

Source: https://tanstack.com/store/latest/docs/reference/classes/ReadonlyStore.md

Retrieves the current state of the store. This is an alternative way to access the state.

```APIDOC
## Method: `get()`

### `get(): T`

Returns the current state of the store.

#### Returns

- `T` - The current state value.
```

--------------------------------

### Example: Creating a Readonly Atom

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useCreateAtom.md

Example demonstrating how to create a readonly atom using the useCreateAtom hook with a getter function. This atom will be stable for the component's lifetime.

```tsx
const countAtom = useCreateAtom(0)

```

--------------------------------

### Simple React Store Example

Source: https://tanstack.com/store/latest/docs/framework/react/examples/simple

This snippet demonstrates creating a store outside of React components and using `useSelector` for optimized re-renders. It includes components for displaying counts and incrementing them.

```typescript
import ReactDOM from 'react-dom/client'
import { createStore, useSelector } from '@tanstack/react-store'

// You can use instantiate a Store outside of React components too!
export const store = createStore({
  dogs: 0,
  cats: 0,
})

interface DisplayProps {
  animal: 'dogs' | 'cats'
}

// This will only re-render when `state[animal]` changes. If an unrelated store property changes, it won't re-render
const Display = ({ animal }: DisplayProps) => {
  const count = useSelector(store, (state) => state[animal]) // formerly, useStore. Now renamed to useSelector.
  return <div>{`${animal}: ${count}`}</div>
}

const updateState = (animal: 'dogs' | 'cats') => {
  store.setState((state: { dogs: number; cats: number }) => {
    return {
      ...state,
      [animal]: state[animal] + 1,
    }
  })
}

interface IncrementProps {
  animal: 'dogs' | 'cats'
}

const Increment = ({ animal }: IncrementProps) => (
  <button onClick={() => updateState(animal)}>My Friend Likes {animal}</button>
)

function App() {
  return (
    <div>
      <h1>How many of your friends like cats or dogs?</h1>
      <p>
        Press one of the buttons to add a counter of how many of your friends
        like cats or dogs
      </p>
      <Increment animal="dogs" />
      <Display animal="dogs" />
      <Increment animal="cats" />
      <Display animal="cats" />
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(<App />)
```

--------------------------------

### Store Methods

Source: https://tanstack.com/store/latest/docs/reference/classes/Store.md

Provides methods to interact with the store's state, including getting the current state, updating it, and subscribing to changes.

```APIDOC
## Methods

### `get(): T`

Retrieves the current state of the store.

#### Returns

*   `T` - The current state value.

### `setState(updater: (prev: T) => T): void`

Updates the state of the store using an updater function. The updater function receives the previous state and should return the new state.

#### Parameters

*   `updater` (function) - A function that takes the previous state and returns the new state.

#### Returns

*   `void`

### `subscribe(observerOrFn: Observer<T> | ((value: T) => void)): Subscription`

Subscribes to state changes in the store. The provided observer function or callback will be invoked whenever the state updates.

#### Parameters

*   `observerOrFn` (Observer<T> | function) - Either an Observer object with an `next` method or a function that accepts the new state value.

#### Returns

*   `Subscription` - An object with an `unsubscribe` method to stop listening for state changes.
```

--------------------------------

### Getting State with the 'get()' method

Source: https://tanstack.com/store/latest/docs/reference/classes/ReadonlyStore.md

An alternative method to retrieve the current state of the ReadonlyStore. It functions identically to the 'state' accessor.

```typescript
get(): T;
```

--------------------------------

### React Store Context Setup and Usage

Source: https://tanstack.com/store/latest/docs/framework/react/examples/store-context

Sets up a typed context to provide a store and an atom, then consumes them in various components to display and modify state. Requires `@tanstack/react-store` and `react-dom/client`.

```tsx
import ReactDOM from 'react-dom/client'
import {
  useAtom,
  useCreateAtom,
  createStoreContext,
  useCreateStore,
  useSelector,
} from '@tanstack/react-store'
import type { Atom, Store } from '@tanstack/react-store'

// one drawback of storing stores and atoms in context is you have to define types for the context manually, instead of everything being inferred.

type CounterStore = {
  cats: number
  dogs: number
}

type StoreContextValue = {
  votesStore: Store<CounterStore>
  countAtom: Atom<number>
}

// create context provider and hook
const { StoreProvider, useStoreContext } =
  createStoreContext<StoreContextValue>()

// top-level app component with provider
function App() {
  // create the store
  const votesStore = useCreateStore<CounterStore>({
    cats: 0,
    dogs: 0,
  })
  // create the atom
  const countAtom = useCreateAtom(0)

  return (
    // provide both the store and atom in a single context object
    <StoreProvider value={{ votesStore, countAtom }}>
      <main>
        <h1>React Store Context</h1>
        <p>
          This example provides both atoms and stores through a single typed
          context object, then consumes them from nested components.
        </p>
        <CatCard />
        <DogCard />
        <TotalCard />
        <StoreButtons />
        <section>
          <h2>Nested Atom Components</h2>
          <AtomSummary />
          <NestedAtomControls />
          <DeepAtomEditor />
        </section>
      </main>
    </StoreProvider>
  )
}

function CatCard() {
  // pull a store from context
  const { votesStore } = useStoreContext()
  // select a value from the store with useSelector
  const value = useSelector(votesStore, (state) => state.cats)

  return <p>Cats: {value}</p>
}

function DogCard() {
  // pull a store from context
  const { votesStore } = useStoreContext()
  // select a value from the store with useSelector
  const value = useSelector(votesStore, (state) => state.dogs)

  return <p>Dogs: {value}</p>
}

function TotalCard() {
  // pull a store from context
  const { votesStore } = useStoreContext()
  // custom selector to calculate total votes from the store state
  const total = useSelector(votesStore, (state) => state.cats + state.dogs)

  return <p>Total votes: {total}</p>
}

function AtomSummary() {
  // pull an atom from context
  const { countAtom } = useStoreContext()
  const count = useSelector(countAtom)

  return <p>Atom count: {count}</p>
}

function NestedAtomControls() {
  const { countAtom } = useStoreContext()

  return (
    <div>
      <button type="button" onClick={() => countAtom.set((prev) => prev + 1)}>
        Increment atom
      </button>
      <button type="button" onClick={() => countAtom.set(0)}>
        Reset atom
      </button>
    </div>
  )
}

function DeepAtomEditor() {
  const { countAtom } = useStoreContext()
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Editable atom count: {count}</p>
      <button type="button" onClick={() => setCount((prev) => prev + 5)}>
        Add 5 to atom
      </button>
    </div>
  )
}

function StoreButtons() {
  const { votesStore } = useStoreContext()

  return (
    <div>
      <button
        type="button"
        onClick={() =>
          votesStore.setState((prev) => ({
            ...prev,
            cats: prev.cats + 1,
          }))
        }
      >
        Add cat
      </button>
      <button
        type="button"
        onClick={() =>
          votesStore.setState((prev) => ({
            ...prev,
            dogs: prev.dogs + 1,
          }))
        }
      >
        Add dog
      </button>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(<App />)

```

--------------------------------

### Basic useAtom Usage

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useAtom.md

This example demonstrates the basic usage of the useAtom hook in a React component. It shows how to destructure the atom's value and the setter function for updating it.

```tsx
const [count, setCount] = useAtom(countAtom)
```

--------------------------------

### useStore Hook Usage Example

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useStore-1.md

Demonstrates how to use the useStore hook to select the 'count' property from the 'counterStore'. This hook is deprecated and useSelector should be used instead.

```typescript
const count = useStore(counterStore, (state) => state.count)
```

--------------------------------

### Updating Store State

Source: https://tanstack.com/store/latest/docs/framework/react/examples/stores

Illustrates how to modify the store's state using the `setState` method. This example shows incrementing the count and updating the message.

```javascript
import React from 'react';
import { useStore } from '@tanstack/react-store';
import { countStore } from './stores';

function CounterControls() {
  const increment = () => {
    countStore.setState(state => ({
      ...state,
      count: state.count + 1,
    }));
  };

  const updateMessage = () => {
    countStore.setState(state => ({
      ...state,
      message: 'Updated!',
    }));
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={updateMessage}>Update Message</button>
    </div>
  );
}

export default CounterControls;

```

--------------------------------

### Store Properties and Accessors

Source: https://tanstack.com/store/latest/docs/reference/classes/Store.md

The Store class exposes an `actions` property for accessing defined actions and a `state` accessor to get the current state.

```APIDOC
## Properties

### `actions: TActions`

Readonly property that holds the actions associated with this store.

## Accessors

### `state: T`

Accessor to get the current state of the store.
```

--------------------------------

### React Store with Module-Level State

Source: https://tanstack.com/store/latest/docs/framework/react/examples/stores

This example shows how to create a store at the module level and access its state within React components using the `useSelector` hook. Components can update the store's state directly using `store.setState`.

```typescript
import ReactDOM from 'react-dom/client'
import { createStore, useSelector } from '@tanstack/react-store'

// Optionally, you can create stores outside of React components at module scope
const petStore = createStore({
  cats: 0,
  dogs: 0,
})

function App() {
  // or define stores inside of components with hook variant. You would have to pass store as props or use store context though.
  // const petStore = useCreateStore(...)

  return (
    <main>
      <h1>React Store Hooks</h1>
      <p>
        This example creates a module-level store. Components read state with
        `useSelector` and update it directly with `store.setState`.
      </p>
      <CatsCard />
      <DogsCard />
      <TotalCard />
      <StoreButtons />
    </main>
  )
}

function CatsCard() {
  // read state slice (only re-renders when the selected value changes)
  const value = useSelector(petStore, (state) => state.cats)

  return <p>Cats: {value}</p>
}

function DogsCard() {
  // read state slice (only re-renders when the selected value changes)
  const value = useSelector(petStore, (state) => state.dogs)

  return <p>Dogs: {value}</p>
}

function StoreButtons() {
  return (
    <div>
      <button
        type="button"
        onClick={() =>
          petStore.setState((prev) => ({
            ...prev,
            cats: prev.cats + 1,
          }))
        }
      >
        Add cat
      </button>
      <button
        type="button"
        onClick={() =>
          // directly update values in the store
          petStore.setState((prev) => ({
            ...prev,
            dogs: prev.dogs + 1,
          }))
        }
      >
        Add dog
      </button>
    </div>
  )
}

function TotalCard() {
  const total = useSelector(petStore, (state) => state.cats + state.dogs)

  return <p>Total votes: {total}</p>
}

const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(<App />)

```

--------------------------------

### React Component Displaying Total Votes

Source: https://tanstack.com/store/latest/docs/framework/react/examples/store-actions

Components can aggregate state from different parts of the store using `useSelector`. This example sums the votes for cats and dogs.

```jsx
import { useSelector } from '@tanstack/react-store';
import { petStore } from './store';

function TotalCard() {
  const total = useSelector(petStore, (state) => state.cats + state.dogs);

  return <div>Total votes: {total}</div>;
}
```

--------------------------------

### Basic Store Creation

Source: https://tanstack.com/store/latest/docs/framework/react/examples/stores

Demonstrates how to create a simple store using the `createStore` function. This is the foundational step for managing state with Tanstack Store.

```javascript
import { createStore } from '@tanstack/store';

interface State {
  count: number;
  message: string;
}

const initialState: State = {
  count: 0,
  message: 'Hello',
};

export const countStore = createStore(initialState);

```

--------------------------------

### createStore with initialValue

Source: https://tanstack.com/store/latest/docs/reference/functions/createStore.md

Creates a store with a given initial value. This is the most basic way to create a store.

```APIDOC
## Function: createStore<T>(initialValue)

### Description
Creates a store with a given initial value. This is the most basic way to create a store.

### Parameters
#### initialValue
- `T` - The initial value of the store.

### Returns
- `Store<T>` - A store instance.
```

--------------------------------

### Create and Use a Basic Store

Source: https://tanstack.com/store/latest/docs/quick-start.md

Create a new store instance to wrap your data and manage its state. Use `setState` to update the state and access the current state via the `state` property.

```typescript
import { createStore } from '@tanstack/store';

const countStore = createStore(0);

console.log(countStore.state); // 0
countStore.setState(() => 1);
console.log(countStore.state); // 1
```

--------------------------------

### createStore with initialValue and actions

Source: https://tanstack.com/store/latest/docs/reference/functions/createStore.md

Creates a store with an initial value and a set of actions. Actions can be used to modify the store's state.

```APIDOC
## Function: createStore<T, TActions>(initialValue, actions)

### Description
Creates a store with an initial value and a set of actions. Actions can be used to modify the store's state.

### Type Parameters
#### T
- `T` - The type of the store's value.
#### TActions
- `TActions` - An object type representing the store's actions, extending `StoreActionMap`.

### Parameters
#### initialValue
- `NonFunction<T>` - The initial value of the store.
#### actions
- `StoreActionsFactory<T, TActions>` - A factory function that creates the store's actions.

### Returns
- `Store<T, TActions>` - A store instance with actions.
```

--------------------------------

### Define and Use Store Actions

Source: https://tanstack.com/store/latest/docs/framework/react/examples/store-actions

Shows how to define actions for state mutations and how to dispatch them from a React component.

```javascript
import { createStore } from "@tanstack/store";

interface State {
  count: number;
}

const initialState: State = {
  count: 0,
};

export const store = createStore(initialState);

export const actions = {
  increment: () => {
    store.setState((state) => ({
      count: state.count + 1,
    }));
  },
  decrement: () => {
    store.setState((state) => ({
      count: state.count - 1,
    }));
  },
  setCount: (count: number) => {
    store.setState({ count });
  },
};

```

```javascript
import React from "react";
import { useStore } from "@tanstack/react-store";
import { store, actions } from "./store";

function Counter() {
  const count = useStore(store, (state) => state.count);

  return (
    <div>
      Count: {count}
      <button onClick={actions.increment}>+</button>
      <button onClick={actions.decrement}>-</button>
      <button onClick={() => actions.setCount(10)}>Set to 10</button>
    </div>
  );
}

export default Counter;

```

--------------------------------

### Using createStoreContext with Atoms and Stores

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/createStoreContext.md

Demonstrates how to create a typed context for atoms and stores, and how to use the `StoreProvider` and `useStoreContext` hook in a React component to access and manage state.

```tsx
const { StoreProvider, useStoreContext } = createStoreContext({
  countAtom: atom<number>(0),
  totalsStore: createStore({ count: 0 })
})

function CountButton() {
  const { countAtom, totalsStore } = useStoreContext()
  const count = useSelector(countAtom)
  const total = useSelector(totalsStore, (state) => state.count)

  return (
    <button
      type="button"
      onClick={() => totalsStore.setState((state) => ({ ...state, count: state.count + 1 }))}
    >
      {count} / {total}
    </button>
  )
}
```

--------------------------------

### InternalBaseAtom get Method

Source: https://tanstack.com/store/latest/docs/reference/interfaces/InternalBaseAtom.md

Retrieves the current value of the atom. This method is inherited from the Readable interface.

```typescript
get: () => T;
```

--------------------------------

### useAtom

Source: https://tanstack.com/store/latest/docs/framework/react/reference/index.md

Hook for working with atoms, providing a way to get and set atom values within React components.

```APIDOC
## useAtom

### Description
A hook to interact with individual atoms. It returns the current value of the atom and a function to update it.

### Signature
`useAtom<T>(atom: Atom<T>) => [T, (newValue: T) => void]`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const [count, setCount] = useAtom(countAtom);
```

### Response
#### Success Response (200)
Returns an array containing the current atom value and a setter function.

#### Response Example
```json
{
  "atomValue": 10,
  "setAtomValue": "function"
}
```
```

--------------------------------

### React App with Store Context Provider

Source: https://tanstack.com/store/latest/docs/framework/react/examples/store-context

Sets up the main application component, creates a store and an atom, and provides them through a custom context. This is the entry point for managing and accessing state.

```tsx
import ReactDOM from 'react-dom/client'
import { useAtom, useCreateAtom, createStoreContext, useCreateStore, useSelector, } from '@tanstack/react-store'
import type { Atom, Store } from '@tanstack/react-store'

// one drawback of storing stores and atoms in context is you have to define types for the context manually, instead of everything being inferred.
type CounterStore = {
  cats: number
  dogs: number
}

type StoreContextValue = {
  votesStore: Store<CounterStore>
  countAtom: Atom<number>
}

// create context provider and hook
const { StoreProvider, useStoreContext } = createStoreContext<StoreContextValue>()

// top-level app component with provider
function App() {
  // create the store
  const votesStore = useCreateStore({
    cats: 0,
    dogs: 0,
  })

  // create the atom
  const countAtom = useCreateAtom(0)

  return (
    // provide both the store and atom in a single context object
    <StoreProvider value={{ votesStore, countAtom }}>
      <main>
        <CatCard />
        <DogCard />
        <TotalCard />
        <StoreButtons />
        <section>
          <h2>Nested Atom Components</h2>
          <AtomSummary />
          <NestedAtomControls />
          <DeepAtomEditor />
        </section>
      </main>
    </StoreProvider>
  )
}

function CatCard() {
  // pull a store from context
  const { votesStore } = useStoreContext()
  // select a value from the store with useSelector
  const value = useSelector(votesStore, (state) => state.cats)

  return <p>Cats: {value}</p>
}

function DogCard() {
  // pull a store from context
  const { votesStore } = useStoreContext()
  // select a value from the store with useSelector
  const value = useSelector(votesStore, (state) => state.dogs)

  return <p>Dogs: {value}</p>
}

function TotalCard() {
  // pull a store from context
  const { votesStore } = useStoreContext()
  // custom selector to calculate total votes from the store state
  const total = useSelector(votesStore, (state) => state.cats + state.dogs)

  return <p>Total votes: {total}</p>
}

function AtomSummary() {
  // pull an atom from context
  const { countAtom } = useStoreContext()
  const count = useSelector(countAtom)

  return <p>Atom count: {count}</p>
}

function NestedAtomControls() {
  const { countAtom } = useStoreContext()

  return (
    <div>
      <button type="button" onClick={() => countAtom.set((prev) => prev + 1)}>
        Increment atom
      </button>
      <button type="button" onClick={() => countAtom.set(0)}>
        Reset atom
      </button>
    </div>
  )
}

function DeepAtomEditor() {
  const { countAtom } = useStoreContext()
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Editable atom count: {count}</p>
      <button type="button" onClick={() => setCount((prev) => prev + 5)}>
        Add 5 to atom
      </button>
    </div>
  )
}

function StoreButtons() {
  const { votesStore } = useStoreContext()

  return (
    <div>
      <button
        type="button"
        onClick={() =>
          votesStore.setState((prev) => ({
            ...prev,
            cats: prev.cats + 1,
          }))
        }
      >
        Add cat
      </button>
      <button
        type="button"
        onClick={() =>
          votesStore.setState((prev) => ({
            ...prev,
            dogs: prev.dogs + 1,
          }))
        }
      >
        Add dog
      </button>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(<App />)

```

--------------------------------

### React Root Rendering

Source: https://tanstack.com/store/latest/docs/framework/react/examples/store-context

Initializes the React application by creating a root and rendering the main component.

```tsx
const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render()
```

--------------------------------

### Readable Interface

Source: https://tanstack.com/store/latest/docs/reference/interfaces/Readable.md

The Readable interface represents a read-only observable data structure. It allows consumers to get the current value and subscribe to changes.

```APIDOC
## Interface: Readable<T>

### Description
Represents a read-only observable data structure that can be subscribed to for changes. It extends the `Subscribable` interface.

### Type Parameters
* **T**: The type of the value held by the Readable.

### Properties
#### get()
* **Description**: Returns the current value of the Readable.
* **Returns**: T - The current value.

#### subscribe(observer)
* **Description**: Subscribes an observer to the Readable. The observer will be called with the latest value whenever it changes.
* **Parameters**:
  * **observer**: (observer) - The observer function or object to subscribe.
* **Returns**: Subscription & (next, error?, complete?) => Subscription - An object with a `unsubscribe` method and potentially methods to handle next, error, and complete events.
```

--------------------------------

### Creating a Simple Atom

Source: https://tanstack.com/store/latest/docs/framework/react/examples/atoms

Shows how to define a basic atom with an initial value. This atom can then be used across different components or hooks.

```javascript
import { atom } from '@tanstack/store';

export const countAtom = atom(0);
```

--------------------------------

### Basic React App with TanStack React Store

Source: https://tanstack.com/store/latest/docs/framework/react/quick-start.md

This snippet shows how to set up a basic React application using TanStack React Store. It includes creating a store, defining components to display and update state, and ensuring components only re-render when their specific state slice changes.

```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { createStore, useSelector } from "@tanstack/react-store";

// You can instantiate the store outside of React components too!
export const store = createStore({
  dogs: 0,
  cats: 0,
});

// This will only re-render when `state[animal]` changes. If an unrelated store property changes, it won't re-render

const Display = ({ animal }) => {
  const count = useSelector(store, (state) => state[animal]);
  return <div>{`${animal}: ${count}`}</div>;
};

const updateState = (animal) => {
  store.setState((state) => {
    return {
      ...state,
      [animal]: state[animal] + 1,
    };
  });
};
const Increment = ({ animal }) => (
  <button onClick={() => updateState(animal)}>My Friend Likes {animal}</button>
);

function App() {
  return (
    <div>
      <h1>How many of your friends like cats or dogs?</h1>
      <p>
        Press one of the buttons to add a counter of how many of your friends
        like cats or dogs
      </p>
      <Increment animal="dogs" />
      <Display animal="dogs" />
      <Increment animal="cats" />
      <Display animal="cats" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

```

--------------------------------

### Store Constructors

Source: https://tanstack.com/store/latest/docs/reference/classes/Store.md

The Store class can be instantiated in several ways, depending on whether you want to provide an initial value, a function to derive the initial value, or an actions factory.

```APIDOC
## Constructor

### `new Store<T, TActions>(getValue: (prev?: T) => T): Store<T, TActions>`

Initializes a new Store instance using a function that derives the initial value from the previous state.

#### Parameters

*   `getValue` (function) - A function that takes the previous state (optional) and returns the new state.

### `new Store<T, TActions>(initialValue: T): Store<T, TActions>`

Initializes a new Store instance with a provided initial value.

#### Parameters

*   `initialValue` (T) - The initial state value for the store.

### `new Store<T, TActions>(initialValue: NonFunction<T>, actionsFactory: StoreActionsFactory<T, TActions>): Store<T, TActions>`

Initializes a new Store instance with an initial value and a factory for creating actions.
```

--------------------------------

### Create Store with Initial Value and Actions

Source: https://tanstack.com/store/latest/docs/reference/functions/createStore.md

This signature allows creating a store with both an initial value and a map of actions. Actions can be used to encapsulate state manipulation logic.

```typescript
function createStore<T, TActions>(initialValue, actions): Store<T, TActions>;
```

--------------------------------

### ReadonlyAtom Interface

Source: https://tanstack.com/store/latest/docs/reference/interfaces/ReadonlyAtom.md

The ReadonlyAtom interface defines an atom that is read-only. It cannot be set after creation. It extends BaseAtom and provides a `get` method to retrieve its value and a `subscribe` method to observe changes.

```APIDOC
## Interface: ReadonlyAtom<T>

### Description
An atom that is read-only and cannot be set.

### Type Parameters
* **T**: The type of the value held by the atom.

### Properties
#### get()
- **get**: () => T
  - Description: Returns the current value of the atom.
  - Inherited from: BaseAtom.get

#### subscribe(observer)
- **subscribe**: (observer: (value: T) => void) => Subscription
  - Description: Subscribes an observer function to changes in the atom's value. The observer will be called with the new value whenever the atom's value changes.
  - Inherited from: BaseAtom.subscribe

### Example
```typescript
import { createAtom } from '@tanstack/store';

const atom = createAtom(() => 42);

// Attempting to set a readonly atom will result in a TypeScript error
// atom.set(43); // Error: Property 'set' does not exist on type 'ReadonlyAtom<number>'

console.log(atom.get()); // Output: 42

const unsubscribe = atom.subscribe((value) => {
  console.log('Atom value changed:', value);
});

// To change the value, you would typically use a mutable atom or a store.
// For demonstration, if this were a mutable atom, you'd call atom.set(newValue);

// unsubscribe();
```
```

--------------------------------

### Creating a Store with Actions

Source: https://tanstack.com/store/latest/docs/framework/react/examples/store-actions

Defines a store with initial state and associated actions for updating the state. Actions are defined as methods within the store's configuration.

```typescript
import ReactDOM from 'react-dom/client'
import { createStore, _useStore, useSelector } from '@tanstack/react-store'

// Optionally, you can create stores outside of React components at module scope
const petStore = createStore(
  {
    cats: 0,
    dogs: 0,
  },
  ({ setState, get }) =>
    // optionally, define actions for updating your store in specific ways right on the store.
    ({ addCat: () => setState((prev) => ({ ...prev, cats: prev.cats + 1 })),
      addDog: () => setState((prev) => ({ ...prev, dogs: prev.dogs + 1 })),
      log: () => console.log(get()),
    })
)

function App() {
  // or define stores inside of components with hook variant. You would have to pass store as props or use store context though.
  // const petStore = useCreateStore(...)

  return (
    <div>
      <h1>Pet Store</h1>
      <p>Cats: {useSelector(petStore, (state) => state.cats)}</p>
      <p>Dogs: {useSelector(petStore, (state) => state.dogs)}</p>
      <button onClick={() => petStore.addCat()}>Add Cat</button>
      <button onClick={() => petStore.addDog()}>Add Dog</button>
      <button onClick={() => petStore.log()}>Log State</button>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
```

--------------------------------

### Create Store with Initial Value

Source: https://tanstack.com/store/latest/docs/reference/functions/createStore.md

Use this signature to create a store with a direct initial value. The store will hold this value and can be updated.

```typescript
function createStore<T>(initialValue): Store<T>;
```

--------------------------------

### useSelector Hook

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useSelector.md

Selects a slice of state from an atom or store and subscribes the component to that selection. It works with any source that exposes `get()` and `subscribe()`, including atoms, readonly atoms, stores, and readonly stores. Omit the selector to subscribe to the whole value.

```APIDOC
## useSelector<TSource, TSelected>(source: SelectionSource<TSource>, selector: (snapshot: TSource) => TSelected, options?: UseSelectorOptions<TSelected>): TSelected

### Description
Selects a slice of state from an atom or store and subscribes the component to that selection. This is the primary React read hook for TanStack Store. It works with any source that exposes `get()` and `subscribe()`, including atoms, readonly atoms, stores, and readonly stores. Omit the selector to subscribe to the whole value.

### Parameters
#### Parameters
- **source** (SelectionSource<TSource>) - The atom, store, or other source to select state from.
- **selector** ((snapshot: TSource) => TSelected) - A function that takes the current state snapshot and returns the selected value.
- **options?** (UseSelectorOptions<TSelected>) - Optional configuration options for the selector.

### Returns
- **TSelected** - The selected value from the state.

### Examples
#### Selecting a specific property:
```tsx
const count = useSelector(counterStore, (state) => state.count)
```

#### Selecting the whole value:
```tsx
const value = useSelector(countAtom)
```
```

--------------------------------

### Basic Atom Usage in React

Source: https://tanstack.com/store/latest/docs/framework/react/examples/atoms

Demonstrates the fundamental creation and usage of an atom in a React component using `useAtom` hook. Ensure the atom is defined and imported.

```jsx
import { useAtom } from '@tanstack/react-store';
import { countAtom } from './atoms';

function Counter() {
  const [count, setCount] = useAtom(countAtom);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Count: {count}
    </button>
  );
}
```

--------------------------------

### Create and Use a React Store

Source: https://tanstack.com/store/latest/docs/framework/react/examples/stores

Create a store at the module scope for global access. Use `useSelector` to access and subscribe to store state within React components.

```tsx
import ReactDOM from 'react-dom/client'
import { createStore, useSelector } from '@tanstack/react-store'

// Optionally, you can create stores outside of React components at module scope
const petStore = createStore({
  cats: 0,
  dogs: 0,
})

function App() {
  // or define stores inside of components with hook variant. You would have to pass store as props or use store context though.
  // const petStore = useCreateStore(...)
  return (
    // ... rest of your app
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <App />
)
```

--------------------------------

### Batching State Updates

Source: https://tanstack.com/store/latest/docs/framework/react/examples/stores

Shows how to batch multiple state updates together using `batch` to ensure they are applied atomically. This is useful for performance optimizations and preventing intermediate UI states.

```javascript
import { batch } from '@tanstack/store';
import { countStore } from './stores';

function performBatchUpdates() {
  batch(() => {
    countStore.setState(state => ({ ...state, count: state.count + 1 }));
    countStore.setState(state => ({ ...state, message: 'Batched Update' }));
  });
}

```

--------------------------------

### useCreateStore with Initial Value and Actions

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useCreateStore.md

Creates a writable store instance with associated actions, stable for the lifetime of the component. It accepts an initial value and an actions factory function.

```APIDOC
## Function: useCreateStore<T, TActions>(initialValue, actions)

### Description
Creates a stable writable store instance with actions for the lifetime of the component. It accepts an initial value and an actions factory function, mirroring the overloads from `createStore`.

### Type Parameters
#### T
- `T`: The type of the store's value.
#### TActions
- `TActions`: An object type extending `StoreActionMap` representing the store's actions.

### Parameters
#### initialValue
- `NonFunction<T>`: The initial value for the store. Must not be a function.
#### actions
- `StoreActionsFactory<T, TActions>`: A factory function that creates the store's actions.

### Returns
- `Store<T, TActions>`: A stable writable store instance with actions.

### Example
```tsx
const counterStore = useCreateStore({ count: 0 }, {
  increment: () => set(state => ({ count: state.count + 1 }))
})
```
```

--------------------------------

### useCreateStore with Initial Value (Writable Store)

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useCreateStore.md

Creates a writable store instance that is stable for the lifetime of the component. It accepts an initial value as its argument.

```APIDOC
## Function: useCreateStore<T>(initialValue)

### Description
Creates a stable writable store instance for the lifetime of the component using an initial value. This hook mirrors the overloads from `createStore`, but ensures the store is only created once per mount.

### Type Parameters
#### T
- `T`: The type of the store's value.

### Parameters
#### initialValue
- `T`: The initial value for the store.

### Returns
- `Store<T>`: A stable writable store instance.

### Example
```tsx
const counterStore = useCreateStore({ count: 0 })
```
```

--------------------------------

### useCreateStore

Source: https://tanstack.com/store/latest/docs/framework/react/reference/index.md

Hook for creating and initializing a store instance within React components.

```APIDOC
## useCreateStore

### Description
Use this hook to create a new store instance within your React component. It takes an initial state and returns the store object.

### Signature
`useCreateStore<TState>(initialState: TState) => UseStore<TState>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const userStore = useCreateStore({ name: '', age: 0 });
```

### Response
#### Success Response (200)
Returns the created store instance.

#### Response Example
```json
{
  "storeInstance": "StoreObject"
}
```
```

--------------------------------

### Store Constructor with Initial Value and Actions Factory

Source: https://tanstack.com/store/latest/docs/reference/classes/Store.md

Initializes a new Store instance with an initial state and a factory function for creating actions.

```typescript
new Store<T, TActions>(initialValue, actionsFactory): Store<T, TActions>;
```

--------------------------------

### ReadonlyStore Constructor

Source: https://tanstack.com/store/latest/docs/reference/classes/ReadonlyStore.md

Initializes a new ReadonlyStore. It can be initialized with a function that derives the initial state or with a direct initial value.

```APIDOC
## Constructor

### `new ReadonlyStore<T>(getValue: (prev?: T) => T): ReadonlyStore<T>`

Initializes the store with a function that computes the initial state.

#### Parameters

##### `getValue`

- `(prev?) => T` - A function that receives the previous state (if any) and returns the new state.

#### Returns

- `ReadonlyStore<T>` - A new instance of ReadonlyStore.

### `new ReadonlyStore<T>(initialValue: T): ReadonlyStore<T>`

Initializes the store with a specific initial value.

#### Parameters

##### `initialValue`

- `T` - The initial value of the store.

#### Returns

- `ReadonlyStore<T>` - A new instance of ReadonlyStore.
```

--------------------------------

### createAtom with initialValue

Source: https://tanstack.com/store/latest/docs/reference/functions/createAtom.md

Creates an atom with a specified initial value. This is a common way to initialize state.

```APIDOC
## Function: createAtom<T>(initialValue, options?)

### Type Parameters

#### T

`T`

### Parameters

#### initialValue

`T`

#### options?

[`AtomOptions`](../interfaces/AtomOptions.md)

### Returns

[`Atom`](../interfaces/Atom.md)
<T>
```

--------------------------------

### flush()

Source: https://tanstack.com/store/latest/docs/reference/functions/flush.md

Immediately flushes all pending state updates to the store. This function does not take any arguments and returns void.

```APIDOC
## flush()

### Description
Immediately flushes all pending state updates to the store. This function is useful for ensuring that all batched state changes are applied without delay.

### Signature
```ts
function flush(): void;
```

### Returns
`void`
```

--------------------------------

### Store Constructor with getValue Function

Source: https://tanstack.com/store/latest/docs/reference/classes/Store.md

Initializes a new Store instance using a function that derives the initial state.

```typescript
new Store<T, TActions>(getValue): Store<T, TActions>;
```

--------------------------------

### Create Writable Store with Actions using useCreateStore

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useCreateStore.md

Use this overload of useCreateStore to create a writable store with associated actions by providing an initial value and an actions factory. The store instance is stable for the component's lifetime.

```typescript
function useCreateStore<T, TActions>(initialValue, actions): Store<T, TActions>;

```

--------------------------------

### BaseAtom Interface

Source: https://tanstack.com/store/latest/docs/reference/interfaces/BaseAtom.md

This section details the BaseAtom interface, outlining its properties and their functionalities. BaseAtom extends Readable and Subscribable, offering a way to access and observe state.

```APIDOC
## Interface: BaseAtom<T>

Defined in: [types.ts:33](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L33)

## Extends

- [`Subscribable`](Subscribable.md)<`T`>
- [`Readable`](Readable.md)<`T`>

## Extended by

- [`Atom`](Atom.md)
- [`ReadonlyAtom`](ReadonlyAtom.md)

## Type Parameters

### T

`T`

## Properties

### get()

```ts
get: () => T;
```

Defined in: [types.ts:30](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L30)

#### Returns

`T`

#### Inherited from

[`Readable`](Readable.md).[`get`](Readable.md#get)

***

### subscribe

```ts
subscribe: (observer) => Subscription & (next, error?, complete?) => Subscription;
```

Defined in: [types.ts:21](https://github.com/TanStack/store/blob/main/packages/store/src/types.ts#L21)

#### Inherited from

[`Subscribable`](Subscribable.md).[`subscribe`](Subscribable.md#subscribe)
```

--------------------------------

### Create Writable Store with useCreateStore

Source: https://tanstack.com/store/latest/docs/framework/react/reference/functions/useCreateStore.md

Use this overload of useCreateStore to create a writable store by providing an initial value. The store instance is stable for the component's lifetime.

```typescript
function useCreateStore<T>(initialValue): Store<T>;

```

--------------------------------

### createStoreContext

Source: https://tanstack.com/store/latest/docs/framework/react/reference/index.md

Creates a React context for a store, allowing the store to be provided and consumed across the component tree.

```APIDOC
## createStoreContext

### Description
This function creates a React Context that can be used to provide a store instance to your React components. This is useful for managing global state.

### Signature
`createStoreContext<TState>(initialState: TState)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const MyStoreContext = createStoreContext({ count: 0 });

function App() {
  return (
    <MyStoreContext.Provider value={myStoreInstance}>
      <MyComponent />
    </MyStoreContext.Provider>
  );
}
```

### Response
#### Success Response (200)
Returns a React Context object.

#### Response Example
```json
{
  "context": "ReactContextObject"
}
```
```

--------------------------------

### subscribe() Method

Source: https://tanstack.com/store/latest/docs/reference/classes/ReadonlyStore.md

Subscribes to changes in the store's state. An observer function or callback is provided to handle state updates.

```APIDOC
## Method: `subscribe()`

### `subscribe(observerOrFn: Observer<T> | (value: T) => void): Subscription`

Subscribes to state changes. The provided function will be called with the latest state whenever it changes.

#### Parameters

##### `observerOrFn`

- `Observer<T> | ((value: T) => void)` - A function or observer object that will be called with the new state value.

#### Returns

- `Subscription` - An object with an `unsubscribe` method to stop listening for changes.
```
Tokens:
Raw