# 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`](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/zustand#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
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 title="CounterApp.tsx"
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 title="main.tsx"
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.

![The mounted counter displays Count: 0 above the Add one button.](https://atloriaassets.blob.core.windows.net/assets/a438221c-c1af-407c-b9e6-a56c986db846/2c0571b62cc0e386f0839e441509abad.png)

## State updates and selectors

`set` merges the returned fields one level deep. For updates to nested objects, see [Update nested state](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/update-nested-state). For computed object or array selections, see [Select state efficiently](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/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](https://zustand-demo.pmnd.rs/) to see a running application. Read [How Zustand works](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/how-zustand-works) for the store and selector model, or [Create and bind a React store](https://bench-zustand-6l.atloria.app/p/bench-zustand-6l-TzFgfybqJX/developer/create-and-bind-a-react-store) for more store patterns.