react-patterns

React Patterns

Overview

React is a declarative component library for building user interfaces. This skill covers idiomatic patterns for components, hooks, state management, and performance.

Project Structure

src/
├── components/
│   ├── ui/                  # Generic UI primitives (Button, Input, Modal)
│   ├── features/            # Feature-specific components
│   └── layouts/             # Page layouts
├── hooks/                   # Custom hooks
├── context/                 # React context providers
├── lib/                     # Utility functions
├── types/                   # Shared TypeScript types
└── App.tsx

Core Patterns

Component Composition

// Prefer composition over prop drilling
function Card({ children }: { children: React.ReactNode }) {
  return <div className="rounded-lg border p-4">{children}</div>;
}

Card.Header = function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="mb-2 font-bold">{children}</div>;
};

Card.Body = function CardBody({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
};

// Usage
<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
</Card>

Custom Hooks

// Extract reusable logic into hooks
function useAsync<T>(asyncFn: () => Promise<T>, deps: unknown[] = []) {
  const [state, setState] = useState<{
    data: T | null;
    error: Error | null;
    loading: boolean;
  }>({ data: null, error: null, loading: true });

  useEffect(() => {
    let cancelled = false;
    setState(s => ({ ...s, loading: true }));

    asyncFn()
      .then(data => { if (!cancelled) setState({ data, error: null, loading: false }); })
      .catch(error => { if (!cancelled) setState({ data: null, error, loading: false }); });

    return () => { cancelled = true; };
  }, deps); // eslint-disable-line react-hooks/exhaustive-deps

  return state;
}

State Management

// useReducer for complex state
type State = { items: Item[]; filter: string; sort: SortKey };
type Action =
  | { type: 'ADD_ITEM'; payload: Item }
  | { type: 'SET_FILTER'; payload: string }
  | { type: 'SET_SORT'; payload: SortKey };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] };
    case 'SET_FILTER':
      return { ...state, filter: action.payload };
    case 'SET_SORT':
      return { ...state, sort: action.payload };
  }
}