> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/TanStack/store/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Build your first TanStack Store in 5 minutes with step-by-step examples

# Quickstart Guide

Get up and running with TanStack Store in minutes. This guide walks you through creating your first store and integrating it with your framework.

## Your First Store

Let's create a simple counter application to demonstrate the core concepts.

<Steps>
  <Step title="Install TanStack Store">
    First, install the appropriate package for your framework:

    <CodeGroup>
      ```bash React theme={null}
      npm install @tanstack/react-store
      ```

      ```bash Vue theme={null}
      npm install @tanstack/vue-store
      ```

      ```bash Solid theme={null}
      npm install @tanstack/solid-store
      ```
    </CodeGroup>
  </Step>

  <Step title="Create a Store">
    Create a store to manage your application state. Stores can be created inside or outside of components:

    <CodeGroup>
      ```typescript React theme={null}
      import { Store } from '@tanstack/react-store'

      // Create a store with initial state
      export const store = new Store({
        dogs: 0,
        cats: 0,
      })
      ```

      ```typescript Vue theme={null}
      import { Store } from '@tanstack/vue-store'

      // Create a store with initial state
      export const store = new Store({
        dogs: 0,
        cats: 0,
      })
      ```

      ```typescript Solid theme={null}
      import { Store } from '@tanstack/solid-store'

      // Create a store with initial state
      export const store = new Store({
        cats: 0,
        dogs: 0,
      })
      ```
    </CodeGroup>

    <Info>
      Stores can be instantiated outside of components and shared across your entire application.
    </Info>
  </Step>

  <Step title="Read Store State">
    Use the framework adapter's hook/composable to read from the store. Only the specific data you select will trigger re-renders:

    <CodeGroup>
      ```tsx React theme={null}
      import { useStore } from '@tanstack/react-store'
      import { store } from './store'

      function Display({ animal }: { animal: 'dogs' | 'cats' }) {
        // This component only re-renders when state[animal] changes
        const count = useStore(store, (state) => state[animal])
        
        return <div>{animal}: {count}</div>
      }
      ```

      ```vue Vue theme={null}
      <script setup>
      import { useStore } from '@tanstack/vue-store'
      import { store } from './store'

      const props = defineProps({ animal: String })

      // This component only re-renders when state[animal] changes
      const count = useStore(store, (state) => state[props.animal])
      </script>

      <template>
        <div>{{ animal }}: {{ count }}</div>
      </template>
      ```

      ```tsx Solid theme={null}
      import { useStore } from '@tanstack/solid-store'
      import { store } from './store'

      function Display(props: { animals: 'dogs' | 'cats' }) {
        // This component only re-renders when state[animals] changes
        const count = useStore(store, (state) => state[props.animals])
        
        return <div>{props.animals}: {count()}</div>
      }
      ```
    </CodeGroup>

    <Note>
      The selector function enables fine-grained subscriptions. Components only re-render when their selected data changes, not when any part of the store updates.
    </Note>
  </Step>

  <Step title="Update Store State">
    Update the store state using `setState`. Updates are immutable and trigger subscriptions:

    <CodeGroup>
      ```tsx React theme={null}
      import { store } from './store'

      function Increment({ animal }: { animal: 'dogs' | 'cats' }) {
        const updateCount = () => {
          store.setState((state) => ({
            ...state,
            [animal]: state[animal] + 1,
          }))
        }

        return (
          <button onClick={updateCount}>
            My Friend Likes {animal}
          </button>
        )
      }
      ```

      ```vue Vue theme={null}
      <script setup>
      import { store } from './store'

      const props = defineProps({ animal: String })

      function updateCount() {
        store.setState((state) => ({
          ...state,
          [props.animal]: state[props.animal] + 1,
        }))
      }
      </script>

      <template>
        <button @click="updateCount">
          My Friend Likes {{ animal }}
        </button>
      </template>
      ```

      ```tsx Solid theme={null}
      import { store } from './store'

      function Button(props: { animals: 'dogs' | 'cats' }) {
        const updateCount = () => {
          store.setState((state) => ({
            ...state,
            [props.animals]: state[props.animals] + 1,
          }))
        }

        return (
          <button onClick={updateCount}>
            Increment
          </button>
        )
      }
      ```
    </CodeGroup>
  </Step>

  <Step title="Compose Your Application">
    Bring it all together in your application:

    <CodeGroup>
      ```tsx React theme={null}
      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>
        )
      }
      ```

      ```vue Vue theme={null}
      <script setup>
      import Increment from './Increment.vue'
      import Display from './Display.vue'
      </script>

      <template>
        <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>
      </template>
      ```

      ```tsx Solid theme={null}
      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>
            <Button animals="dogs" />
            <Display animals="dogs" />
            <Button animals="cats" />
            <Display animals="cats" />
          </div>
        )
      }
      ```
    </CodeGroup>
  </Step>
</Steps>

## Core Concepts

Now that you've built your first store, let's explore the key concepts:

### Creating Stores

You can create stores with values or functions:

```typescript theme={null}
import { createStore } from '@tanstack/store'

// Store with a value
const countStore = createStore(0)

// Store with an object
const userStore = createStore({
  name: 'John',
  age: 30,
})
```

### Derived Stores

Create stores that compute values from other stores:

```typescript theme={null}
const count = createStore(5)

// Derived store automatically updates when count changes
const double = createStore(() => count.state * 2)

console.log(double.state) // 10
count.setState(() => 10)
console.log(double.state) // 20
```

You can access the previous computed value:

```typescript theme={null}
const count = createStore(1)

const sum = createStore<number>((prev) => {
  return count.state + (prev ?? 0)
})

console.log(sum.state) // 1
count.setState(() => 2)
console.log(sum.state) // 3
```

### Subscriptions

Subscribe to store changes for side effects:

```typescript theme={null}
const count = createStore(0)

const { unsubscribe } = count.subscribe((state) => {
  console.log('Count changed to:', state)
})

count.setState(() => 5) // Logs: "Count changed to: 5"

// Cleanup
unsubscribe()
```

### Batched Updates

Batch multiple updates to trigger subscribers only once:

```typescript theme={null}
import { batch } from '@tanstack/store'

const countStore = createStore(0)

// Subscribers will only trigger once with the final value
batch(() => {
  countStore.setState(() => 1)
  countStore.setState(() => 2)
})

console.log(countStore.state) // 2
```

## Framework-Specific Examples

### React Complete Example

Here's the complete React example from the source code:

```tsx theme={null}
import ReactDOM from 'react-dom/client'
import { Store, useStore } from '@tanstack/react-store'

// Create store outside of components
export const store = new Store({
  dogs: 0,
  cats: 0,
})

// Display component with fine-grained subscriptions
const Display = ({ animal }: { animal: 'dogs' | 'cats' }) => {
  const count = useStore(store, (state) => state[animal])
  return <div>{`${animal}: ${count}`}</div>
}

// Update helper
const updateState = (animal: 'dogs' | 'cats') => {
  store.setState((state) => ({
    ...state,
    [animal]: state[animal] + 1,
  }))
}

// Increment component
const Increment = ({ animal }: { animal: 'dogs' | 'cats' }) => (
  <button onClick={() => updateState(animal)}>
    My Friend Likes {animal}
  </button>
)

function App() {
  return (
    <div>
      <h1>How many of your friends like cats or dogs?</h1>
      <Increment animal="dogs" />
      <Display animal="dogs" />
      <Increment animal="cats" />
      <Display animal="cats" />
    </div>
  )
}

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

### Vue Complete Example

```vue theme={null}
<!-- store.ts -->
<script lang="ts">
import { Store } from '@tanstack/vue-store'

export const store = new Store({
  dogs: 0,
  cats: 0,
})

export function updateState(animal: 'dogs' | 'cats') {
  store.setState((state) => ({
    ...state,
    [animal]: state[animal] + 1,
  }))
}
</script>

<!-- Display.vue -->
<script setup>
import { useStore } from '@tanstack/vue-store'
import { store } from './store'

const props = defineProps({ animal: String })
const count = useStore(store, (state) => state[props.animal])
</script>

<template>
  <div>{{ animal }}: {{ count }}</div>
</template>

<!-- App.vue -->
<script setup>
import Increment from './Increment.vue'
import Display from './Display.vue'
</script>

<template>
  <h1>How many of your friends like cats or dogs?</h1>
  <Increment animal="dogs" />
  <Display animal="dogs" />
  <Increment animal="cats" />
  <Display animal="cats" />
</template>
```

### Solid Complete Example

```tsx theme={null}
import { Store, useStore } from '@tanstack/solid-store'
import { render } from 'solid-js/web'

// Create store outside of components
export const store = new Store({
  cats: 0,
  dogs: 0,
})

// Display component
export const Display = (props: { animals: 'dogs' | 'cats' }) => {
  const count = useStore(store, (state) => state[props.animals])
  return <div>{props.animals}: {count()}</div>
}

// Button component
export const Button = (props: { animals: 'dogs' | 'cats' }) => {
  return (
    <button
      onClick={() => {
        store.setState((state) => ({
          ...state,
          [props.animals]: state[props.animals] + 1,
        }))
      }}
    >
      Increment
    </button>
  )
}

const App = () => {
  return (
    <div>
      <h1>How many of your friends like cats or dogs?</h1>
      <Button animals="dogs" />
      <Display animals="dogs" />
      <Button animals="cats" />
      <Display animals="cats" />
    </div>
  )
}

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

## Next Steps

You've successfully created your first TanStack Store! Here's what to explore next:

<CardGroup cols={2}>
  <Card title="Core Concepts" icon="book" href="/concepts/stores">
    Deep dive into stores, atoms, and reactivity
  </Card>

  <Card title="API Reference" icon="code" href="/reference/store">
    Explore the complete API documentation
  </Card>

  <Card title="Framework Guides" icon="wand-magic-sparkles" href="/framework/react">
    Framework-specific patterns and best practices
  </Card>

  <Card title="Examples" icon="lightbulb" href="/examples">
    Browse example applications and patterns
  </Card>
</CardGroup>