> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/05.-state-management/1.-zustand.md).

# 1. Zustand

This document introduces Zustand and explains its basic usage through simple example code.

***

### Zustand

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2F9gY5m2DRLduSvm7lfWpE%2Fimg%20(8).png?alt=media&#x26;token=83b2407a-6363-4f05-81b9-585ef43a3606" alt=""><figcaption></figcaption></figure>

Zustand is a simple, fast, and scalable state management solution. It has a convenient hook-based API, so there's no boilerplate code.

In particular, using Zustand helps a lot with improving common problems such as context loss, which can occur with things like React's concurrency features and mixed renderers.

It's not that difficult, so let's look at how to use it through some example code.

{% stepper %}
{% step %}

### 1. Creating a Store

The following is an example of creating a state store with Zustand.

{% code title="store.js" %}

```javascript
const useBearStore = create((set) => ({
  // 초기값이 0으로 설정된 bears라는 상태 속성
  bears: 0,
  // bears를 증가 시키는 함수
  // 'set' 함수를 사용하여 이전 상태를 가져와서 bears 값을 1 증가
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  // bears의 상태를 0으로 초기화
  removeAllBears: () => set({ bears: 0 }),
}))
```

{% endcode %}

Explanation:

* A Zustand store is essentially a hook. It can hold primitive values, objects, functions, and more.
* State is merged and updated through the `set` function.
* In the code above, the `create` function is used to create a state management hook called `useBearStore`. This function is used to create a state store. It takes a single parameter — a callback function that includes the `set` function — to update state.
  {% endstep %}

{% step %}

### 2. Using It in a Component

The `useBearStore` you created can be used anywhere without a Provider. When you select a piece of state, the component re-renders whenever it changes.

Below are example components that read and update the state.

{% code title="BearCounter.jsx" %}

```jsx
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}
```

{% endcode %}

{% code title="Controls.jsx" %}

```jsx
function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}
```

{% endcode %}

Explanation:

* As shown in the example code, you can use the created `useBearStore` hook to retrieve update functions, both to display state on screen and to trigger actions.
* The `BearCounter` component calls `useBearStore` to render the `bears` state on screen.
* The `Controls` component changes the state when the button is clicked, via `increasePopulation`.
* As shown here, one of Zustand's features is that you can access state without using a Provider.
  {% endstep %}
  {% endstepper %}

***

<details>

<summary>Document Generation Info</summary>

Document generated by Confluence on 2025-12-18 2:27 AM

[Atlassian](http://www.atlassian.com/)

</details>