state-management

# State Management Skill

Patterns for choosing and implementing state management strategies in frontend applications.

## State Categories

### 1. Local UI State
State that only affects a single component.

```typescript
// Form input values
const [value, setValue] = useState('');

// Toggle states
const [isOpen, setIsOpen] = useState(false);

// Loading/error states
const [status, setStatus] = useState<'idle' | 'loading' | 'error'>('idle');
```

### 2. Shared UI State
State shared between components (lift state up or use context).

```typescript
// Theme context
const ThemeContext = createContext<Theme>('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState<Theme>('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
```

### 3. Server State
Data from external sources (use TanStack Query, SWR, or similar).

```typescript
// TanStack Query
const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  staleTime: 5 * 60 * 1000, // 5 minutes
});

// Mutations
const mutation = useMutation({
  mutationFn: createUser,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
});
```

### 4. URL State
State that should be shareable/bookmarkable.

```typescript
// Next.js App Router
import { useSearchParams, useRouter } from 'next/navigation';

function FilteredList() {
  const searchParams = useSearchParams();
  const router = useRouter();

  const filter = searchParams.get('filter') || 'all';

  const setFilter = (value: string) => {
    const params = new URLSearchParams(searchParams);
    params.set('filter', value);
    router.push(`?${params.toString()}`);
  };

  return <Filters value={filter} onChange={setFilter} />;
}
```

## State Management Libraries

### When to Use What

| Use Case | Solution |
|----------|----------|
| Simple local state | `useState` |
| Complex local state | `useReducer` |
|