1// ── Layer 1: Pure UI Component (no state, no fetching) ─────────────────
Pure UI component: easy to test in Storybook, zero dependencies
2interface OrderCardProps {
3  orderId: string;
4  status: 'pending' | 'shipped' | 'delivered';
5  total: number;
6  onCancel: (id: string) => void;
7}
8 
9export function OrderCard({ orderId, status, total, onCancel }: OrderCardProps) {
10  return (
11    <div className="border rounded-lg p-4">
12      <span className="text-sm text-gray-500">#{orderId}</span>
13      <StatusBadge status={status} />
14      <p className="font-bold">${total.toFixed(2)}</p>
15      {status === 'pending' && (
16        <button onClick={() => onCancel(orderId)}>Cancel</button>
17      )}
18    </div>
19  );
20}
21 
22// ── Layer 2: Hook (data + logic) ─────────────────────────────────────────
React Query handles caching, background refetch, loading states — do not reinvent this
23function useOrders(userId: string) {
24  const { data, isLoading, error } = useQuery({
25    queryKey: ['orders', userId],
26    queryFn: () => api.getOrders(userId),
27    staleTime: 30_000,
28  });
29 
30  const cancelOrder = useMutation({
31    mutationFn: (orderId: string) => api.cancelOrder(orderId),
32    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['orders', userId] }),
33  });
34 
35  return {
36    orders: data ?? [],
37    isLoading,
38    error,
39    cancelOrder: cancelOrder.mutate,
40  };
41}
42 
43// ── Layer 3: Feature Component (composes hook + UI) ───────────────────────
Feature component is thin — just wires hook to UI
44export function OrderList({ userId }: { userId: string }) {
45  const { orders, isLoading, cancelOrder } = useOrders(userId);
46 
47  if (isLoading) return <OrderListSkeleton />;
48 
49  return (
50    <div className="space-y-4">
51      {orders.map(order => (
52        <OrderCard
53          key={order.id}
54          {...order}
55          onCancel={cancelOrder}
56        />
57      ))}
58    </div>
59  );
60}

1// State management decision framework
2 
3// 1. IS IT SERVER DATA (from an API)?
4//    → Use React Query / SWR. Do NOT put in global store.
React Query caches this automatically — no Redux needed
5const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser });
6const { data: orders } = useQuery({ queryKey: ['orders', userId], queryFn: fetchOrders });
7 
8// 2. IS IT URL STATE (current page/filters)?
9//    → Use URL search params. Shareable, bookmarkable, free.
10const [searchParams, setSearchParams] = useSearchParams();
11const role = searchParams.get('role') ?? 'all';
URL state is free persistence and shareability — use it
12const page = parseInt(searchParams.get('page') ?? '1');
13 
14// 3. IS IT LOCAL UI STATE (open/closed, form values)?
15//    → useState or useReducer in the component.
16const [isModalOpen, setIsModalOpen] = useState(false);
17 
18// 4. IS IT SHARED UI STATE (theme, auth, notifications)?
19//    → React Context for simple cases, Zustand for complex.
20const { theme, setTheme } = useThemeContext();
21 
22// Zustand store — only for genuinely shared client state
23interface UIStore {
24  sidebarCollapsed: boolean;
25  notificationQueue: Notification[];
26  toggleSidebar: () => void;
27  addNotification: (n: Notification) => void;
28}
29 
30const useUIStore = create<UIStore>((set) => ({
31  sidebarCollapsed: false,
32  notificationQueue: [],
33  toggleSidebar: () => set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed })),
34  addNotification: (n) => set((s) => ({
35    notificationQueue: [...s.notificationQueue, n]
36  })),
37}));

1import { memo, useMemo, useCallback } from 'react';
2import { FixedSizeList as List } from 'react-window';
3 
4// ✅ Code splitting — only loads when /dashboard route is visited
5const Dashboard = lazy(() => import('./pages/Dashboard'));
6 
7// ✅ React.memo — only re-renders when order prop changes
8const OrderRow = memo(function OrderRow({
memo is useless without useCallback on the onCancel prop
9  order,
10  onCancel
11}: {
12  order: Order;
13  onCancel: (id: string) => void
14}) {
15  return <div>{order.id}: {order.total}</div>;
16});
17 
18function OrdersPage({ userId }: { userId: string }) {
19  const { data: orders = [] } = useQuery({ queryKey: ['orders', userId], queryFn: fetchOrders });
20 
21  // ✅ useMemo — expensive sort only recomputed when orders change
22  const sortedOrders = useMemo(
23    () => [...orders].sort((a, b) => b.createdAt - a.createdAt),
24    [orders]
25  );
26 
useCallback without memo on OrderRow is pointless overhead
27  // ✅ useCallback — stable reference so OrderRow.memo works
28  const handleCancel = useCallback(
29    (orderId: string) => cancelOrder(orderId),
30    []  // no dependencies — cancelOrder is stable
31  );
32 
33  // ✅ Virtualized list — renders only visible rows
react-window renders only ~8 rows instead of 10,000
34  return (
35    <List
36      height={600}
37      itemCount={sortedOrders.length}
38      itemSize={72}
39      width="100%"
40    >
41      {({ index, style }) => (
42        <div style={style}>
43          <OrderRow order={sortedOrders[index]} onCancel={handleCancel} />
44        </div>
45      )}
46    </List>
47  );
48}

1import { Component, Suspense, lazy } from 'react';
2 
3// Error Boundary (class component — React requires this)
4class ErrorBoundary extends Component<
5  { fallback: ReactNode; onError?: (error: Error) => void; children: ReactNode },
6  { hasError: boolean; error: Error | null }
7> {
8  state = { hasError: false, error: null };
9 
10  static getDerivedStateFromError(error: Error) {
11    return { hasError: true, error };
12  }
13 
14  componentDidCatch(error: Error, info: ErrorInfo) {
componentDidCatch is the right place to report to Sentry/Datadog
15    // Report to Sentry, Datadog, etc.
16    this.props.onError?.(error);
17    reportError(error, { componentStack: info.componentStack });
18  }
19 
20  render() {
21    if (this.state.hasError) return this.props.fallback;
22    return this.props.children;
23  }
24}
25 
26// Usage: Error Boundary + Suspense for resilient lazy-loaded features
27const Analytics = lazy(() => import('./Analytics'));
28 
29function Dashboard() {
30  return (
ErrorBoundary wraps Suspense — catches both render errors and failed lazy imports
31    <ErrorBoundary
32      fallback={<div>Analytics failed to load. <button>Retry</button></div>}
33      onError={(e) => console.error('Dashboard error:', e)}
34    >
35      <Suspense fallback={<AnalyticsSkeleton />}>
36        <Analytics />
37      </Suspense>
38    </ErrorBoundary>
39  );
40}