> 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.md).

# 05. State Management

This article explains the concept and types of state management, the Prop Drilling approach used for state management, and the basic usage of Zustand, one of the major state management libraries.

{% hint style="info" %}
In "state management," state can be described as "a plain JavaScript object that affects the application (typically the screen)."

It generally refers to "data that changes." In an SPA (Single Page Application), state propagates according to component containment relationships, and the screen is updated accordingly, making it a very important thing to manage.
{% endhint %}

State management is broadly divided into three types.

| **Type**              | **Key Characteristics**                                                                                                                                                                                                                                                                                                                      |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Local State           | <p>- State managed only within a specific component.<br>- Not shared with other components.<br>- For example, receiving user input in an input field, select box, etc. (Form data generally falls under local state.)</p>                                                                                                                    |
| Cross-Component State | <p>- State managed across multiple components.<br>- State that is used by, and affects, many components (a good example is a common Modal component used throughout a project).<br>- Requires the Prop Drilling approach, where a parent component passes props down to child components so that the state reaches the target component.</p> |
| Global State          | <p>- State that affects the entire project. For example, think of user-related functionality.<br>- This also uses the Prop Drilling approach to pass data from parent to child.</p>                                                                                                                                                          |
| Prop Drilling         | <p>- Used solely to pass props down to child components.<br>- The process of passing data from one component to another (component > intermediate component > intermediate component > ... > target component).<br>- Makes props difficult to trace</p>                                                                                      |

In React, the Context API and Redux have traditionally been widely used for state management, but their drawback has been that they require considerable effort to understand.

Recently, many easier and more powerful alternative state management frameworks have come into use, including Mobx, Recoil, and Zustand. Among these, the number of Zustand users has been growing rapidly.

This chapter explains the basic usage of Zustand.