programming-in-react

# Programming in React

## Overview

Modern React development using functional components, hooks, and TypeScript. This skill guides you through React workflows from component creation to testing.

**Core principle:** Components are functions that return UI. State and effects are managed through hooks. Composition over inheritance always.

**REQUIRED SUB-SKILL:** Use ed3d-house-style:howto-code-in-typescript for general TypeScript patterns. This skill covers React-specific TypeScript usage only.

## When to Use

- Creating or modifying React components
- Working with React hooks (useState, useEffect, custom hooks)
- Planning React features or UI work
- Debugging React-specific issues (hooks errors, render problems)
- When you see .jsx or .tsx files

## Workflow: Creating Components

**Functional components only.** Use `interface` for props, avoid `React.FC`:

```typescript
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

export function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}
```

**Event typing:** `React.MouseEvent<HTMLButtonElement>`, `React.ChangeEvent<HTMLInputElement>`. Children: `React.ReactNode`.

## Workflow: Managing State

**useState for simple state:**

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

// Always use functional updates when new state depends on old
setCount(prev => prev + 1); // Good
setCount(count + 1); // Avoid - can be stale in closures
```

**useReducer for complex state:**
When state has multiple related pieces that update together, or next state depends on previous state in complex ways.

**State management decision framework:**
1. **Local component state?** � useState
2. **Multiple related state updates?** � useReducer
3. **Shared across components?** � Context API or custom hook
4. **Need external library?** � Use codebase-investigator to find existing patterns, or internet-researcher to evaluate options