mirror of
https://github.com/pmndrs/zustand.git
synced 2025-12-08 19:45:52 +00:00
56a39b6a0f
Zustand already provides a `useStore` hook, and reusing the same name for a custom hook could lead to confusion if someone accidentally imports the wrong one. To avoid this, I’ve renamed the custom hook to `useBear`. The name is short, memorable, and aligns with Zustand’s playful style.
73 lines
2.0 KiB
Markdown
73 lines
2.0 KiB
Markdown
---
|
|
title: Introduction
|
|
description: How to use Zustand
|
|
nav: 0
|
|
---
|
|
|
|
<div class="flex justify-center mb-4">
|
|
<img src="../bear.jpg" alt="Logo Zustand" />
|
|
</div>
|
|
|
|
A small, fast, and scalable bearbones state management solution.
|
|
Zustand has a comfy API based on hooks.
|
|
It isn't boilerplatey or opinionated,
|
|
but has enough convention to be explicit and flux-like.
|
|
|
|
Don't disregard it because it's cute, it has claws!
|
|
Lots of time was spent to deal with common pitfalls,
|
|
like the dreaded [zombie child problem],
|
|
[React concurrency], and [context loss]
|
|
between mixed renderers.
|
|
It may be the one state manager in the React space that gets all of these right.
|
|
|
|
You can try a live demo [here](https://codesandbox.io/s/dazzling-moon-itop4).
|
|
|
|
[zombie child problem]: https://react-redux.js.org/api/hooks#stale-props-and-zombie-children
|
|
[react concurrency]: https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md
|
|
[context loss]: https://github.com/facebook/react/issues/13332
|
|
|
|
## Installation
|
|
|
|
Zustand is available as a package on NPM for use:
|
|
|
|
```bash
|
|
# NPM
|
|
npm install zustand
|
|
# Or, use any package manager of your choice.
|
|
```
|
|
|
|
## First create a store
|
|
|
|
Your store is a hook!
|
|
You can put anything in it: primitives, objects, functions.
|
|
The `set` function _merges_ state.
|
|
|
|
```js
|
|
import { create } from 'zustand'
|
|
|
|
const useBear = create((set) => ({
|
|
bears: 0,
|
|
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
|
|
removeAllBears: () => set({ bears: 0 }),
|
|
updateBears: (newBears) => set({ bears: newBears }),
|
|
}))
|
|
```
|
|
|
|
## Then bind your components, and that's it!
|
|
|
|
You can use the hook anywhere, without the need of providers.
|
|
Select your state and the consuming component
|
|
will re-render when that state changes.
|
|
|
|
```jsx
|
|
function BearCounter() {
|
|
const bears = useBear((state) => state.bears)
|
|
return <h1>{bears} bears around here...</h1>
|
|
}
|
|
|
|
function Controls() {
|
|
const increasePopulation = useBear((state) => state.increasePopulation)
|
|
return <button onClick={increasePopulation}>one up</button>
|
|
}
|
|
```
|