React Rules Highlights Summary

Every highlight bullet from the 6 pages in this section, gathered on one page and grouped by the page it came from.

50 React & Next.js Rules

• Default to Server Components, add use client only for interactivity or browser APIs
• Eliminate fetch waterfalls with Promise.all and parallel Suspense boundaries
• React Compiler auto-memoizes, so drop most manual useMemo and useCallback
• Four Next.js cache layers, request memoization, data, full route, router
• Server Actions are public endpoints, always verify auth and validate with Zod
• Never expose secrets, NEXT_PUBLIC_ vars are inlined into the client bundle

40 Next.js Rules

• Provide loading.tsx and error.tsx for every data-fetching route segment
• Route groups, private folders, parallel and intercepting routes organize the app tree
• cookies, headers, searchParams, and no-store fetch opt a route into dynamic rendering
• Validate Server Action inputs with Zod, then revalidatePath or revalidateTag
• Return action errors as values, place redirect outside any try catch
• Import server-only to keep database clients and secrets out of client bundles

30 API Rules for Next.js

• Route Handlers serve external consumers and webhooks, Server Actions serve internal UI
• Keep handlers thin, push business logic into lib or services functions
• Validate query params and bodies with Zod safeParse before processing
• Verify webhook signatures and make handlers idempotent via stored event IDs
• Log full errors server-side, return generic messages with proper status codes
• Rate limit, pool database connections, and paginate every list endpoint

30 React UX Rules

• Show something immediately with skeletons, never blank screens during data loading
• Use useOptimistic for mutations, useTransition to keep UI interactive during updates
• Show inline errors with aria-describedby, never alert boxes or cleared inputs
• Prefer undo over confirmation dialogs for reversible destructive actions
• Touch targets need at least 44x44 pixels for reliable mobile taps
• Respect prefers-reduced-motion, prefers-color-scheme, and prefers-contrast system settings

Problem/Solution

• Accept ref as a regular prop instead of wrapping in forwardRef
• Replace useFormState with useActionState from react, gaining an isPending flag
• Return Server Action errors as serializable values, not thrown exceptions
• Keep use() promises stable across renders to avoid infinite suspense
• Async components are server-only, fetch on server or use() on client
• Render context directly and use precedence on stylesheets for ordered dedupe

React & Next.js Architecture Decisions

• Each scenario ranks best, second, third choices plus the common wrong pick
• Async Server Components beat useEffect fetching for lists, SEO, and zero client JS
• useActionState handles pending, error, and data states with progressive enhancement
• Push the use client boundary as low as possible to ship less JS
• Server-side search, filters, and pagination via URL params stay shareable and indexable
• Intercepting plus parallel routes give a modal one URL, two presentations