React quick start

Install Zustand, create a store hook, and use it in a mounted React component to display and update selected state.

Your store is a hook: create it with create, select the state a component needs, and the component re-renders when that selection changes.

Prerequisites

Use a React 18 or later project. For TypeScript, install @types/react 18 or later. Zustand lists both as peer dependencies; the example also uses react-dom to mount the app in a browser.

Install Zustand

From your React project, run:

bash
Copy
npm install zustand

Steps

1. Create the store hook

Create CounterApp.tsx. The store contains a count and an action that increments it. Calling set with the changed field updates the count while retaining the rest of the store.

tsx
Copy
import { create } from 'zustand'

type CounterState = {
  count: number
  addOne: () => void
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  addOne: () => set((state) => ({ count: state.count + 1 })),
}))

export function CounterApp() {
  const count = useCounterStore((state) => state.count)
  const addOne = useCounterStore((state) => state.addOne)

  return (
    <main>
      <p>Count: {count}</p>
      <button onClick={addOne}>Add one</button>
    </main>
  )
}

Each hook call selects one value from the store. The count selection renders the current number; clicking Add one calls the action, updates count, and causes the component to render the new number. You do not need a provider to use this hook.

2. Mount the component

Render CounterApp from your React entry point. This main.tsx expects an HTML element with id="root" in the page.

tsx
Copy
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { CounterApp } from './CounterApp'

const rootElement = document.getElementById('root')!

createRoot(rootElement).render(
  <StrictMode>
    <CounterApp />
  </StrictMode>,
)

With both files mounted, the page shows Count: 0 and an Add one button. Each click increments the displayed count.

State updates and selectors

set merges the returned fields one level deep. For updates to nested objects, see Update nested state. For computed object or array selections, see Select state efficiently.

At the end, you have a mounted counter whose component subscribes to selected store state and updates when its action changes that state.

Where to go next

Open the Zustand live demo to see a running application. Read How Zustand works for the store and selector model, or Create and bind a React store for more store patterns.