# State Management Basics

> Manages UI state effectively including local and global state handling

- Skill: `digitalexplorers/state-management-basics` (Agent Skill)
- Install (CLI): `npx skillmds@latest add digitalexplorers/state-management-basics`
- Raw SKILL.md: https://api.skillmd.com/api/skills/digitalexplorers/state-management-basics/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: DigitalExplorers (https://skillmd.com/u/digitalexplorers)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/digitalexplorers/state-management-basics

---


## Provides

- Local vs global state handling
- Simple and reusable state patterns
- Clear data flow structure
- Predictable UI updates

## Use When

- Handling dynamic UI updates
- Managing user interactions (clicks, inputs, toggles)
- Sharing data between components
- Avoiding inconsistent UI state

---

## Instructions

### 1. Identify State Type

- Use **local state** for component-specific data  
  (e.g., input fields, toggles, modals)

- Use **global state** for shared data  
  (e.g., user info, theme, auth state)

---

### 2. Initialize State

- Define state using hooks or state containers  
- Keep initial state minimal and predictable  

Example:

```javascript
const [count, setCount] = useState(0);