react-patterns

React Patterns

Apply proven React + TypeScript patterns for scalable, maintainable frontend code.

When to Use

• User needs to create a custom hook for data fetching or shared logic
• User wants to structure a feature using container/presenter pattern
• User needs to build a form with validation (React Hook Form + Zod)
• User wants to add error boundaries to catch rendering errors
• User needs to compose components instead of using deep prop drilling

Available Operations

1. Create custom hooks for data fetching with React Query
2. Build components using composition pattern (slots, children)
3. Implement container/presenter separation
4. Add error boundaries with recovery
5. Build validated forms with React Hook Form + Zod

Multi-Step Workflow

Step 1: Set Up Project Dependencies

npm install @tanstack/react-query react-hook-form @hookform/resolvers zod react-error-boundary
npm install -D @types/react @types/react-dom typescript

Step 2: Create Custom Hooks for Data Fetching

// src/hooks/useItems.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { itemApi } from '../services/itemApi';
import { toast } from 'sonner';

export function useItems(filters?: ItemFilters) {
  return useQuery({
    queryKey: ['items', filters],
    queryFn: () => itemApi.list(filters),
    staleTime: 30_000,
  });
}

export function useItem(id: string) {
  return useQuery({
    queryKey: ['items', id],
    queryFn: () => itemApi.get(id),
    enabled: !!id,
  });
}

export function useCreateItem() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: itemApi.create,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['items'] });
      toast.success('Item created');
    },
    onError: (err) => toast.error(err.message),
  });
}

Step 3: Build Components with Composition

// src/components/Card.tsx
interface CardProps {
  children: React.ReactNode;
  className?: string;
}

export function Card({ children, className }: CardProps) {
  return <div className={cn('rounded-lg border bg-white shadow-sm', className)}>{children}</div>;
}

Card.Header = function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="flex items-center justify-between p-4 border-b">{children}</div>;
};

Card.Content = function CardContent({ children }: { children: React.ReactNode }) {
  return <div className="p-4">{children}</div>;
};

Card.Footer = function CardFooter({ children }: { children: React.ReactNode }) {
  return <div className="p-4 border-t bg-gray-50">{children}</div>;
};

// Usage:
<Card>
  <Card.Header>
    <h3>{item.title}</h3>
    <StatusBadge status={item.status} />
  </Card.Header>
  <Card.Content>
    <p>{item.description}</p>
  </Card.Content>
  <Card.Footer>
    <ProgressBar value={item.progress} />
  </Card.Footer>
</Card>