Suggest an edit

Improve this article

Refine the answer for “Accessing state”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

### 1. Create the store

```javascript
// store.ts
import { create } from 'zustand'

interface CounterState {
  count: number
  increase: () => void
  decrease: () => void
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}))
```

---

### 2. Use the store in a component

The store itself is a **React hook** that returns access to the state and actions.

#### Simple usage example:

```javascript
// Counter.tsx
import { useCounterStore } from './store'

export function Counter() {
  const { count, increase, decrease } = useCounterStore() // <- calling the Zustand hook

return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  )
}
```

The React component automatically **subscribes** only to `count`, `increase`, and `decrease`.
When those values change, the component **re-renders**.

---

### 3. Pull out only the part of the state you need (selectors)

So the component does not update when the whole state changes, you can select only the fields you need:

```javascript
const count = useCounterStore((state) => state.count)
const increase = useCounterStore((state) => state.increase)
```

or compactly:

```javascript
const { count, increase } = useCounterStore((state) => ({
  count: state.count,
  increase: state.increase,
}))
```

This way the component will **update only when specific fields change**, not the whole store.

---

### 4. Accessing state outside React components

Zustand also lets you work with the store **outside React** (for example, in utilities or an API):

```javascript
// Get the state
console.log(useCounterStore.getState().count)

// Update the state
useCounterStore.setState({ count: 100 })
```

---

### Summary

| Scenario | How to get the state |
|---|---|
| Inside a React component | `const value = useStore((s) => s.value)` |
| Several fields | `const { a, b } = useStore((s) => ({ a: s.a, b: s.b }))` |
| Outside React | `useStore.getState()` / `useStore.setState()` |
| Manual subscription | `useStore.subscribe(callback)` |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts326 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.