---

name: programming-in-react description: Use when writing or modifying React components, planning React features, or working with .jsx/.tsx files - provides modern React patterns with TypeScript, hooks usage, component composition, and common pitfalls to avoid

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:

Copyinterface 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:

Copyconst [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 (Zustand, Redux Toolkit, TanStack Query)

Workflow: Handling Side Effects

useEffect for external systems only (API calls, subscriptions, browser APIs). NOT for derived state.

Critical rules:

• Always include all dependencies (ESLint: react-hooks/exhaustive-deps)
• Always return cleanup function (prevents memory leaks)
• Think "which state does this sync with?" not "when does this run?"

Common pattern:

CopyuseEffect(() => {
  const controller = new AbortController();
  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(data => setData(data));
  return () => controller.abort(); // Cleanup
}, []);

For comprehensive useEffect guidance (dependencies, cleanup, when NOT to use, debugging), see useEffect-deep-dive.md.

Workflow: Component Composition

Children prop: Use children: React.ReactNode for wrapping components.

Custom hooks: Extract reusable stateful logic (prefer over duplicating logic in components).

Compound components: For complex APIs like <Select><Select.Option /></Select>.

Render props: When component controls rendering but parent provides template.

Workflow: Testing

ALWAYS use codebase-investigator first to find existing test patterns. Common approaches: React Testing Library, Playwright, Cypress.

See react-testing.md for comprehensive guidance.

Performance

Profile before optimizing. Use useMemo, useCallback, React.memo only when measurements show need. React 19 compiler handles most memoization automatically.

Common Rationalizations - STOP

Quick Reference

Red Flags - STOP and Refactor

• React.FC in new code
• useEffect with state as only dependency
• Missing cleanup in useEffect
• Array index as key: key={index}
• Direct state mutation: state.value = x
• Missing dependencies in useEffect (suppressing ESLint warning)
• any type for props or event handlers

When you see these, refactor before proceeding.