React Performance Patterns (Local/Docker)

From Vercel Engineering, optimized for local installs and Docker deployments.

Priority Categories

Critical Patterns

Eliminate Waterfalls (Priority 1)

// WRONG - sequential
const data1 = await fetchA();
const data2 = await fetchB();

// RIGHT - parallel
const [data1, data2] = await Promise.all([fetchA(), fetchB()]);

// RIGHT - stream slow data
<Suspense fallback={<Skeleton />}>
  <SlowComponent />
</Suspense>

Reduce Bundle Size (Priority 2)

// WRONG - barrel import (pulls entire library)
import { FileText } from 'lucide-react';

// RIGHT - direct import
import FileText from 'lucide-react/dist/esm/icons/file-text';

// RIGHT - dynamic import for heavy components
import dynamic from 'next/dynamic';
const PDFViewer = dynamic(() => import('./PDFViewer'), { ssr: false });

Server Caching (Priority 3)

import { cache } from 'react';
const getData = cache(async (id: string) => await db.get(id));

Local/Docker Focus

• Optimize for cold-start and steady-state responsiveness over SEO
• Use in-process caches (server process persists)
• Avoid sequential awaits even for local APIs
• Defer non-critical work until after render
• Minimize RSC props to reduce hydration overhead

Full Reference

Complete guide: .claude/skills/react-patterns/SKILL.md Condensed guide: .claude/skills/react-patterns/REACT_PATTERNS.md