perf: react best practices audit fixes

apps/code/src/app/dashboard/(main)/billing/page.tsx

@@ -1,16 +1,15 @@
-import { fetchServerData } from "@/lib/server-api";
+import { fetchServerData, getDevPlanStatus } from "@/lib/server-api";
 
 import BillingClient from "./BillingClient";
 
-import type { DevPlanStatus } from "@/app/dashboard/useDevPlanStatus";
 import type { paths } from "@/lib/api/v1";
 
 type PaymentMethod =
 	paths["/dev-plans/payment-method"]["get"]["responses"]["200"]["content"]["application/json"];
 
 export default async function BillingPage() {
 	const [devPlanStatus, paymentMethod] = await Promise.all([
-		fetchServerData<DevPlanStatus>("GET", "/dev-plans/status"),
+		getDevPlanStatus(),
 		fetchServerData<PaymentMethod>("GET", "/dev-plans/payment-method"),
 	]);
 

apps/code/src/app/dashboard/(main)/layout.tsx

@@ -1,19 +1,16 @@
 import { redirect } from "next/navigation";
 
 import DashboardShell from "@/app/dashboard/DashboardShell";
-import { fetchServerData } from "@/lib/server-api";
-
-import type { DevPlanStatus } from "@/app/dashboard/useDevPlanStatus";
-import type { UserMe } from "@/hooks/useUser";
+import { getDevPlanStatus, getUserMe } from "@/lib/server-api";
 
 export default async function DashboardLayout({
 	children,
 }: {
 	children: React.ReactNode;
 }) {
 	const [userData, devPlanStatus] = await Promise.all([
-		fetchServerData<UserMe>("GET", "/user/me"),
-		fetchServerData<DevPlanStatus>("GET", "/dev-plans/status"),
+		getUserMe(),
+		getDevPlanStatus(),
 	]);
 
 	if (!userData?.user) {

apps/code/src/app/dashboard/(main)/profile/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
 
-import { fetchServerData } from "@/lib/server-api";
+import { fetchServerData, getUserMe } from "@/lib/server-api";
 
 import { ProfilePageClient } from "./ProfilePageClient";
 
@@ -9,8 +9,6 @@ import type { Metadata } from "next";
 
 type ProfileResponse =
 	paths["/user/profile"]["get"]["responses"][200]["content"]["application/json"];
-type UserMeResponse =
-	paths["/user/me"]["get"]["responses"][200]["content"]["application/json"];
 
 export const metadata: Metadata = {
 	title: "Your Profile · DevPass",
@@ -20,7 +18,7 @@ export const metadata: Metadata = {
 export default async function ProfilePage() {
 	const [profileData, userData] = await Promise.all([
 		fetchServerData<ProfileResponse>("GET", "/user/profile"),
-		fetchServerData<UserMeResponse>("GET", "/user/me"),
+		getUserMe(),
 	]);
 
 	if (!userData?.user) {

apps/code/src/app/dashboard/DashboardShell.tsx

@@ -176,7 +176,6 @@ export default function DashboardShell({
 	const { posthogKey, googleAdsPurchaseConversion, googleAdsSignupConversion } =
 		config;
 	const api = useApi();
-	const { stripe, isLoading: stripeLoading } = useStripe();
 	const queryClient = useQueryClient();
 
 	const { user } = useUser({
@@ -191,6 +190,11 @@ export default function DashboardShell({
 	const subscribeMutation = api.useMutation("post", "/dev-plans/subscribe");
 	const finalizeMutation = api.useMutation("post", "/dev-plans/finalize");
 	const setupSessionId = searchParams.get("setup_session_id");
+	// Stripe.js is only needed to finalize a checkout setup session, so skip
+	// loading it on every other dashboard view.
+	const { stripe, isLoading: stripeLoading } = useStripe(
+		Boolean(setupSessionId),
+	);
 	const signupMethod = searchParams.get("signup_method");
 	const signupTracked = useRef(false);
 

apps/code/src/app/dashboard/agents/[agentId]/AgentDetailClient.tsx

@@ -12,12 +12,12 @@ import {
 	Terminal,
 	Zap,
 } from "lucide-react";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import { notFound, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
-import { AgentModelUsageChart } from "@/app/dashboard/components/AgentModelUsageChart";
 import {
 	type AgentDefinition,
 	AGENTS,
@@ -31,6 +31,16 @@ import { useApi, useFetchClient } from "@/lib/fetch-client";
 
 import { buildAgentLogsCsv } from "@llmgateway/shared";
 
+// The model usage chart pulls in recharts and renders below the fold, so
+// keep it out of the agent detail page's initial bundle.
+const AgentModelUsageChart = dynamic(
+	() =>
+		import("@/app/dashboard/components/AgentModelUsageChart").then(
+			(mod) => mod.AgentModelUsageChart,
+		),
+	{ ssr: false, loading: () => <div className="h-[280px]" /> },
+);
+
 type ModelSortColumn =
 	| "id"
 	| "provider"

apps/code/src/app/dashboard/components/UsageOverview.tsx

@@ -2,13 +2,13 @@
 
 import { format, formatDistanceToNowStrict } from "date-fns";
 import { Activity, Coins, Cpu, Gem, TrendingUp } from "lucide-react";
+import dynamic from "next/dynamic";
 import { usePostHog } from "posthog-js/react";
 import { useEffect } from "react";
 
 import { useAppConfig } from "@/lib/config";
 import { useApi } from "@/lib/fetch-client";
 
-import { AgentModelUsageChart } from "./AgentModelUsageChart";
 import AllowanceExhaustedCard from "./AllowanceExhaustedCard";
 import PayAsYouGoCard from "./PayAsYouGoCard";
 import ResetPassCard from "./ResetPassCard";
@@ -17,6 +17,14 @@ import { UsageBar } from "./UsageBar";
 import type { paths } from "@/lib/api/v1";
 import type { DevPlanCycle } from "@llmgateway/shared";
 
+// The model usage chart pulls in recharts and renders below the fold, so
+// keep it out of the usage page's initial bundle.
+const AgentModelUsageChart = dynamic(
+	() =>
+		import("./AgentModelUsageChart").then((mod) => mod.AgentModelUsageChart),
+	{ ssr: false, loading: () => <div className="h-[280px]" /> },
+);
+
 type ActivityResponse =
 	paths["/activity"]["get"]["responses"][200]["content"]["application/json"];
 type ActivityItem = ActivityResponse["activity"][number];

apps/code/src/components/ui/flickering-grid.tsx

@@ -36,7 +36,10 @@ export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
 }) => {
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 	const containerRef = useRef<HTMLDivElement>(null);
-	const [isInView, setIsInView] = useState(false);
+	// Ref instead of state: visibility only gates the animation loop, and
+	// keeping it out of the effect's dependencies stops every viewport
+	// crossing from tearing down and rebuilding the observers and buffers.
+	const isInViewRef = useRef(false);
 	const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
 
 	const memoizedColor = useMemo(() => {
@@ -149,7 +152,7 @@ export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
 
 			let lastTime = 0;
 			const animate = (time: number) => {
-				if (!isInView || !gridParams) {
+				if (!isInViewRef.current || !gridParams) {
 					return;
 				}
 
@@ -176,15 +179,16 @@ export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
 
 			intersectionObserver = new IntersectionObserver(
 				([entry]) => {
-					setIsInView(entry.isIntersecting);
+					const wasInView = isInViewRef.current;
+					isInViewRef.current = entry.isIntersecting;
+					if (entry.isIntersecting && !wasInView) {
+						lastTime = performance.now();
+						animationFrameId = requestAnimationFrame(animate);
+					}
 				},
 				{ threshold: 0 },
 			);
 			intersectionObserver.observe(canvas);
-
-			if (isInView) {
-				animationFrameId = requestAnimationFrame(animate);
-			}
 		}
 
 		return () => {
@@ -198,7 +202,7 @@ export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
 				intersectionObserver.disconnect();
 			}
 		};
-	}, [setupCanvas, updateSquares, drawGrid, width, height, isInView]);
+	}, [setupCanvas, updateSquares, drawGrid, width, height]);
 
 	return (
 		<div

apps/code/src/lib/public-profile.ts

@@ -1,13 +1,16 @@
+import { cache } from "react";
+
 import { getConfig } from "@/lib/config-server";
 
 import type { ProfileData } from "@/components/profile/ProfileView";
 
 /**
  * Fetch a public DevPass profile by username from the API. Returns null when
  * the profile does not exist or is private. Used by the public profile page
- * and its dynamic OG image.
+ * and its dynamic OG image. cache() dedupes the generateMetadata + page
+ * calls within a single request.
  */
-export async function fetchPublicProfile(
+export const fetchPublicProfile = cache(async function fetchPublicProfile(
 	username: string,
 ): Promise<ProfileData | null> {
 	const config = getConfig();
@@ -24,4 +27,4 @@ export async function fetchPublicProfile(
 	} catch {
 		return null;
 	}
-}
+});

apps/code/src/lib/server-api.ts

@@ -1,9 +1,12 @@
 import { cookies } from "next/headers";
 import createFetchClient from "openapi-fetch";
+import { cache } from "react";
 
 import { getConfig } from "./config-server";
 
 import type { paths } from "./api/v1";
+import type { DevPlanStatus } from "@/app/dashboard/useDevPlanStatus";
+import type { UserMe } from "@/hooks/useUser";
 
 // Typed client for public, unauthenticated endpoints. Unlike
 // createServerApiClient below it never reads the request cookies, so pages
@@ -54,6 +57,17 @@ type PatchPaths = {
 	[P in keyof paths]: paths[P] extends { patch: any } ? P : never;
 }[keyof paths];
 
+// The dashboard layout and several pages request these endpoints
+// independently in the same render pass; cache() collapses the duplicate
+// round-trips into one per request.
+export const getUserMe = cache(() =>
+	fetchServerData<UserMe>("GET", "/user/me"),
+);
+
+export const getDevPlanStatus = cache(() =>
+	fetchServerData<DevPlanStatus>("GET", "/dev-plans/status"),
+);
+
 export async function fetchServerData<T>(
 	method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH",
 	path: keyof paths,

apps/code/src/lib/stripe.ts

@@ -19,13 +19,18 @@ function getStripePromise(publishableKey: string) {
 	return stripePromise;
 }
 
-export function useStripe() {
+// Pass enabled: false to skip loading Stripe.js entirely until the caller
+// actually needs it — the script is ~200KB and phones home on load.
+export function useStripe(enabled = true) {
 	const { stripePublishableKey } = useAppConfig();
 	const [stripe, setStripe] = useState<Stripe | null>(null);
 	const [isLoading, setIsLoading] = useState(true);
 	const [error, setError] = useState<Error | null>(null);
 
 	useEffect(() => {
+		if (!enabled) {
+			return;
+		}
 		getStripePromise(stripePublishableKey ?? FALLBACK_TEST_PUBLISHABLE_KEY)
 			.then((stripeInstance) => {
 				setStripe(stripeInstance);
@@ -35,7 +40,7 @@ export function useStripe() {
 				setError(err);
 				setIsLoading(false);
 			});
-	}, [stripePublishableKey]);
+	}, [enabled, stripePublishableKey]);
 
 	return { stripe, isLoading, error };
 }

apps/docs/next.config.ts

@@ -14,6 +14,11 @@ const nextConfig: NextConfig = {
 	productionBrowserSourceMaps: true,
 	reactCompiler: true,
 	transpilePackages: ["shiki"],
+	// lib/source.ts imports the full lucide-react icon barrel; transform it
+	// to direct imports so the whole icon set stays out of the bundles.
+	experimental: {
+		optimizePackageImports: ["lucide-react"],
+	},
 
 	rewrites() {
 		return [