---

name: building-react-apps description: Builds production React applications with hooks, TypeScript, state management, and performance optimization. Use when creating React SPAs, component systems, or interactive UIs.

React

Quick Start

Copyimport { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

Features

Common Patterns

Typed Component with Props

Copyinterface UserCardProps {
  user: { id: string; name: string; email: string };
  onEdit: (user: UserCardProps['user']) => void;
  onDelete: (id: string) => void;
}

function UserCard({ user, onEdit, onDelete }: UserCardProps) {
  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button onClick={() => onEdit(user)}>Edit</button>
      <button onClick={() => onDelete(user.id)}>Delete</button>
    </div>
  );
}

Custom Hook for Data Fetching

Copyfunction useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;

    async function fetchData() {
      try {
        const res = await fetch(url);
        const json = await res.json();
        if (!cancelled) setData(json);
      } catch (e) {
        if (!cancelled) setError(e as Error);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    fetchData();
    return () => { cancelled = true; };
  }, [url]);

  return { data, loading, error };
}

Form with Validation

Copyimport { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: z.infer<typeof schema>) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}
      <input {...register('password')} type="password" />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit">Login</button>
    </form>
  );
}

Workflows

Component Development

1. Define props interface with TypeScript
2. Create component with hooks
3. Extract reusable logic to custom hooks
4. Add error boundaries for fault isolation
5. Write tests with Testing Library

State Management Decision

CopyLocal state only       -> useState
Complex local state    -> useReducer
Shared across tree     -> Context + useReducer
App-wide state         -> Zustand/Redux
Server state           -> TanStack Query

Best Practices

Project Structure

Copysrc/
├── App.tsx
├── main.tsx
├── components/         # Reusable UI components
├── hooks/              # Custom hooks
├── pages/              # Route components
├── stores/             # State management
├── services/           # API calls
├── utils/              # Helper functions
└── types/              # TypeScript types

For detailed examples and patterns, see reference files above.