React quick start

Prerequisites

Use React 18 or later and TypeScript 4.5 or later. Zustand 5.0.15 requires React >=18.0.0 and TypeScript 4.5 or later for its published types. The package requires Node.js >=12.20.0.

Install Zustand

In your React project, run:

bash
Copy
npm install zustand

Connect a typed store to React

Use a store when several components need the same state or when you want the update logic beside the state it changes. This example creates a typed store, selects its state with useStore, and mounts a component that toggles the displayed value.

1. Create the store. createStore gives you a store API that can be used outside React and passed to useStore.

ts
Copy
import { createStore } from 'zustand/vanilla'

type CounterStore = {
  enabled: boolean
  toggle: () => void
}

export const counterStore = createStore<CounterStore>((set, get) => ({
  enabled: false,
  toggle: () => set({ enabled: !get().enabled }),
}))

2. Select the state and action in a component. Each selector supplies one value from the store to the component.

tsx
Copy
import { useStore } from 'zustand'

import { counterStore } from './store'

export function App() {
  const enabled = useStore(counterStore, (state) => state.enabled)
  const toggle = useStore(counterStore, (state) => state.toggle)

  return (
    <main>
      <p>Feature is {enabled ? 'enabled' : 'disabled'}</p>
      <button type="button" onClick={toggle}>
        Toggle feature
      </button>
    </main>
  )
}

3. Mount the component in the browser.

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

import { App } from './App'

const rootElement = document.getElementById('root')

if (rootElement === null) {
  throw new Error('Root element not found')
}

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

The mounted page initially shows Feature is disabled. Clicking Toggle feature changes it to Feature is enabled; clicking again changes it back. Keep the store outside the component so React re-renders from the same store instance instead of creating a new store on each render.

Watch out for

• Select individual values or actions when possible. A selector that creates a new reference on every render needs the approach described in Selectors and rendering.
• Do not use a module-level global store for request-specific state in server-rendered applications. See Handle server-rendered stores.

Where to go next

• How Zustand works explains the store, immutable updates, selectors, actions, and vanilla stores.
• Typed store patterns develops the TypeScript patterns used by larger stores.
• Selectors and rendering explains selection and render behavior, including stable outputs for computed selections.

Try the authors' live demo to see a mounted Zustand application.