React Design Patterns: The Complete Guide

// useFetch: reusable data fetching with loading & error states
function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    setIsLoading(true);
    fetch(url, { signal: controller.signal })
      .then((res) => res.json())
      .then(setData)
      .catch((err) => {
        if (err.name !== 'AbortError') setError(err);
      })
      .finally(() => setIsLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, isLoading, error };
}

// Usage: clean, declarative data fetching
function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading } = useFetch<User>(`/api/users/${userId}`);
  if (isLoading) return <Skeleton />;
  return <h1>{user?.name}</h1>;
}

// useLocalStorage: persist state across sessions
function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

// Usage
const [theme, setTheme] = useLocalStorage('theme', 'light');

// Compound Tabs component with shared state via Context
const TabsContext = createContext<{
  activeTab: string;
  setActiveTab: (tab: string) => void;
} | null>(null);

function Tabs({ children, defaultTab }: { children: ReactNode; defaultTab: string }) {
  const [activeTab, setActiveTab] = useState(defaultTab);
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

function TabList({ children }: { children: ReactNode }) {
  return <div className="tab-list" role="tablist">{children}</div>;
}

function Tab({ value, children }: { value: string; children: ReactNode }) {
  const ctx = useContext(TabsContext)!;
  return (
    <button
      role="tab"
      aria-selected={ctx.activeTab === value}
      onClick={() => ctx.setActiveTab(value)}
      className={ctx.activeTab === value ? 'active' : ''}
    >
      {children}
    </button>
  );
}

function TabPanel({ value, children }: { value: string; children: ReactNode }) {
  const ctx = useContext(TabsContext)!;
  if (ctx.activeTab !== value) return null;
  return <div role="tabpanel">{children}</div>;
}

// Attach sub-components for clean API
Tabs.List = TabList;
Tabs.Tab = Tab;
Tabs.Panel = TabPanel;

// Usage: intuitive, composable API
<Tabs defaultTab="preview">
  <Tabs.List>
    <Tabs.Tab value="code">Code</Tabs.Tab>
    <Tabs.Tab value="preview">Preview</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="code"><CodeEditor /></Tabs.Panel>
  <Tabs.Panel value="preview"><LivePreview /></Tabs.Panel>
</Tabs>

// Presentational: pure UI, zero data knowledge
function UserCard({ name, email, avatar }: UserCardProps) {
  return (
    <div className="card">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

// Container (classic): wrapper component handles data
function UserCardContainer({ userId }: { userId: string }) {
  const { data: user, isLoading } = useFetch<User>(`/api/users/${userId}`);
  if (isLoading) return <Skeleton />;
  return <UserCard name={user.name} email={user.email} avatar={user.avatar} />;
}

// Container (modern): custom hook IS the container
function useUserData(userId: string) {
  return useFetch<User>(`/api/users/${userId}`);
}

// Usage: hook + presentational component = clean separation
function ProfilePage({ userId }: { userId: string }) {
  const { data: user, isLoading } = useUserData(userId);
  if (isLoading) return <Skeleton />;
  return <UserCard name={user.name} email={user.email} avatar={user.avatar} />;
}

// Render prop: component delegates rendering to consumer
function MouseTracker({ render }: {
  render: (pos: { x: number; y: number }) => ReactNode;
}) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

// Usage: consumer controls what gets rendered with mouse data
<MouseTracker
  render={({ x, y }) => (
    <div>
      <Cursor x={x} y={y} />
      <Tooltip position={{ x, y }} text="Follow me!" />
    </div>
  )}
/>

// useToggle with state reducer: consumer controls transitions
type ToggleState = { on: boolean };
type ToggleAction = { type: 'toggle' } | { type: 'reset' };

function defaultReducer(state: ToggleState, action: ToggleAction): ToggleState {
  switch (action.type) {
    case 'toggle': return { on: !state.on };
    case 'reset': return { on: false };
    default: return state;
  }
}

function useToggle({
  reducer = defaultReducer,
}: { reducer?: typeof defaultReducer } = {}) {
  const [state, dispatch] = useReducer(reducer, { on: false });
  const toggle = () => dispatch({ type: 'toggle' });
  const reset = () => dispatch({ type: 'reset' });
  return { on: state.on, toggle, reset };
}

// Consumer: limit toggles to 4 times max
function App() {
  const [count, setCount] = useState(0);

  const { on, toggle, reset } = useToggle({
    reducer(state, action) {
      if (action.type === 'toggle' && count >= 4) {
        return state; // Block further toggles
      }
      return defaultReducer(state, action);
    },
  });

  return (
    <button onClick={() => { toggle(); setCount((c) => c + 1); }}>
      {on ? 'ON' : 'OFF'} (toggled {count} times)
    </button>
  );
}

// Split providers by domain — each context triggers independent re-renders
function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const login = useCallback(async (creds: Credentials) => {
    const user = await authAPI.login(creds);
    setUser(user);
  }, []);
  const logout = useCallback(() => setUser(null), []);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const toggle = useCallback(() =>
    setTheme((t) => (t === 'light' ? 'dark' : 'light')), [setTheme]
  );

  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Compose providers — order matters for dependencies
function AppProviders({ children }: { children: ReactNode }) {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationProvider>
          {children}
        </NotificationProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

// Anti-pattern: giant monolithic context
// ✗ Updating notifications re-renders EVERY consumer
const AppContext = createContext({
  user, theme, notifications, settings, permissions
});

// ✓ Split contexts: each domain re-renders independently
const AuthContext = createContext<AuthState>(null);
const ThemeContext = createContext<ThemeState>(null);
const NotificationContext = createContext<NotificationState>(null);

// withAuth: redirect unauthenticated users
function withAuth<P extends object>(WrappedComponent: ComponentType<P>) {
  return function AuthenticatedComponent(props: P) {
    const { user, isLoading } = useAuth();

    if (isLoading) return <LoadingSpinner />;
    if (!user) return <Navigate to="/login" />;

    return <WrappedComponent {...props} />;
  };
}

// Usage: any component becomes auth-protected
const ProtectedDashboard = withAuth(Dashboard);
const ProtectedSettings = withAuth(Settings);

// In routes
<Route path="/dashboard" element={<ProtectedDashboard />} />
<Route path="/settings" element={<ProtectedSettings />} />

// Server Component: runs on server, ships zero JS to client
// app/products/page.tsx (no 'use client' directive)
async function ProductList() {
  const products = await db.query('SELECT * FROM products WHERE active = true');

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
      {/* Client component for interactivity */}
      <AddToCartButton />
    </div>
  );
}

// Client Component: only the interactive parts need JS
// components/AddToCartButton.tsx
'use client';
function AddToCartButton({ productId }: { productId: string }) {
  const [added, setAdded] = useState(false);
  return (
    <button onClick={() => { addToCart(productId); setAdded(true); }}>
      {added ? '✓ Added' : 'Add to Cart'}
    </button>
  );
}

// Error boundary with fallback UI and retry
class ErrorBoundary extends Component<
  { children: ReactNode; fallback?: ReactNode },
  { hasError: boolean; error: Error | null }
> {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, info: ErrorInfo) {
    // Log to your error tracking service
    errorReporter.capture(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div className="error-fallback">
          <h2>Something went wrong</h2>
          <button onClick={() => this.setState({ hasError: false })}>
            Try again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Usage: wrap sections, not the entire app
<ErrorBoundary fallback={<ChartError />}>
  <RevenueChart />
</ErrorBoundary>
<ErrorBoundary fallback={<TableError />}>
  <TransactionTable />
</ErrorBoundary>