# Managing Local Vs Global State

> Teaches when to use local state vs global state (Context) in React 19. Use when deciding state management strategy, avoiding prop drilling, or architecting component state. Use when this capability is needed.

- Skill: `tomevault-io/managing-local-vs-global-state` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/managing-local-vs-global-state`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/managing-local-vs-global-state/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/managing-local-vs-global-state

---


# Local vs Global State

## Decision Flow

**Use Local State (useState) when:**
- State only needed in one component
- State only needed by component + direct children
- State changes frequently (avoid Context re-renders)
- State is UI-specific (form input, toggle, etc.)

**Use Lifted State when:**
- Two sibling components need to share state
- Parent coordinates between children
- Still contained to component subtree

**Use Context when:**
- Many components at different nesting levels need state
- Prop drilling through 3+ levels
- Global configuration (theme, locale, auth)
- State changes infrequently

## Examples

**Local State:**
```javascript
function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
```

**Lifted State:**
```javascript
function Parent() {
  const [filter, setFilter] = useState('all');

  return (
    <>
      <FilterButtons filter={filter} setFilter={setFilter} />
      <ItemList filter={filter} />
    </>
  );
}
```

**Context (React 19 with `use()`):**
```javascript
import { createContext, use } from 'react';

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext value={{ theme, setTheme }}>
      <Layout />
    </ThemeContext>
  );
}

function DeepComponent() {
  const { theme, setTheme } = use(ThemeContext);

  return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
    Toggle Theme
  </button>;
}
```

## Anti-Patterns

❌ **Context for frequently changing state:**
```javascript
const MousePositionContext = createContext();

function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handler = (e) => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);

  return (
    <MousePositionContext value={position}>
      <App />
    </MousePositionContext>
  );
}
```

This causes re-render of entire tree on every mouse move!

✅ **Local state or ref instead:**
```javascript
function Component() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handler = (e) => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);

  return <div>Mouse: {position.x}, {position.y}</div>;
}
```

For comprehensive state management patterns, see: `research/react-19-comprehensive.md` lines 1293-1342.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/djankies) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->