graph TD
    A[React Code Change] --> B{Priority Scan}
    B --> C["🔴 Critical: Waterfalls"]
    B --> D["🔴 Critical: Bundle Size"]
    B --> E["🟠 High: Server Perf"]
    B --> F["🟡 Med-High: Client Fetch"]
    B --> G["🟡 Medium: Re-renders"]
    B --> H["🟡 Medium: Render Perf"]
    B --> I["🔵 Low-Med: Micro-opts"]
    C --> J[Apply Fixes by Priority]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

// BAD: Sequential fetches create waterfalls
function Dashboard() {
  const user = use(fetchUser());         // 200ms
  const posts = use(fetchPosts(user.id)); // 200ms after user resolves
  const stats = use(fetchStats(user.id)); // 200ms after user resolves
  // Total: 600ms sequential
}

// GOOD: Parallel fetches with server components
async function Dashboard() {
  const user = await fetchUser();
  const [posts, stats] = await Promise.all([
    fetchPosts(user.id),
    fetchStats(user.id),
  ]);
  // Total: 400ms (user + parallel posts/stats)
}

// BAD: Import entire library
import { format } from "date-fns";

// GOOD: Tree-shakeable import
import { format } from "date-fns/format";

// BAD: Eager loading heavy components
import { HeavyChart } from "./HeavyChart";

// GOOD: Lazy loading with Suspense
const HeavyChart = lazy(() => import("./HeavyChart"));

// BAD: New object reference every render
<UserContext.Provider value={{ user, theme, locale }}>

// GOOD: Stable reference with useMemo
const contextValue = useMemo(
  () => ({ user, theme, locale }),
  [user, theme, locale]
);
<UserContext.Provider value={contextValue}>