[[상태 관리 최적화 (Zustand, Valtio)]]
📌 Brief Summary
Optimizing state management involves choosing the right tool for the specific reactivity needs of the application. Libraries like Zustand (Action-based) and Valtio (Proxy-based) offer different paradigms to reduce boilerplate and minimize re-renders compared to traditional solutions like Redux or React Context.

📖 Core Content
* **Zustand (Atomic/Simplistic):**
    * Uses a hook-based approach where state is externalized from React.
    * Allows for "selective rendering" by specifying exactly which parts of the state a component should listen to.
    * Very low boilerplate; no providers needed.
* **Valtio (Proxy-based/Mutative):**
    * Uses JS Proxies to track mutations. You can "mutate" state like regular objects, and Valtio automatically tracks which components need to re-render.
    * Extremely high performance for "real-time" updates where nested state needs to be updated deeply.
* **Selection Criteria:**
    * Use **Zustand** when you need predictable actions and a clear unidirectional flow for business logic.
    * Use **Valtio** when the developer experience of direct mutation is preferred or for state that updates frequently (e.g., game UI properties).
* **Optimization Patterns:**
    * **Externalize heavy state:** Keeping ephemeral or high-frequency state (e.g., scroll position) in a Zustand store rather than React's `useState`.
    * **Transient Updates:** Updating store values without triggering a React render (reading directly via `api.getState()`).

🔗 Knowledge Connections
* Related Topics: [[React 상태 관리 (React State Management)]], [[Redux 등 상태 관리 (State Management)]], [[Reactive-Programming]]
* Projects/Contexts: [[Skybound Protocol UI]], [[Skybound Mission Persistence]]
* Contradictions/Notes: Proxy-based state (Valtio) can sometimes hide where updates are coming from, making debugging harder in large teams if strict conventions aren't followed.

Last updated: 2026-04-18