State Management

State Management

When to use this skill

• Global State Required: Multiple components share the same data
• Props Drilling Problem: Passing props through 5+ levels
• Complex State Logic: Authentication, shopping cart, themes, etc.
• State Synchronization: Sync server data with client state

Instructions

Step 1: Determine State Scope

Distinguish between local and global state.

Decision Criteria:

• Local State: Used only within a single component

  • Form input values, toggle states, dropdown open/close
  • Use useState, useReducer

• Global State: Shared across multiple components

  • User authentication, shopping cart, theme, language settings
  • Use Context API, Redux, Zustand

Example:

// ✅ Local state (single component)
function SearchBox() {
  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onFocus={() => setIsOpen(true)}
      />
      {isOpen && <SearchResults query={query} />}