Explore

Inline objects, arrays, and functions as props create new references every render, defeating React.memo and causing cascading re-renders across the tree.

Event handlers and effects that capture state in closures can reference outdated values, causing silent data corruption and missed updates.

Adding 'use client' unnecessarily ships component JS to the browser. Only use it when you need hooks, event handlers, or browser APIs.

Sequential await calls on independent operations create request waterfalls. Use Promise.all or Suspense boundaries to parallelize.

Fetching related data inside loops creates N+1 queries that scale linearly with data size. Use eager loading or batch queries instead. [CWE-400]

Using array indices as key props causes incorrect state preservation, UI corruption, and degraded performance when lists are reordered or filtered.

Raw <img> tags skip automatic optimization, lazy loading, and responsive sizing. next/image provides WebP/AVIF conversion, blur placeholders, and CLS prevention.

External font loading from Google Fonts or CDNs causes layout shift and render-blocking requests. next/font self-hosts fonts with zero layout shift.

Large client libraries loaded synchronously block the initial page load. Use next/dynamic or React.lazy to code-split and load them on demand.

Barrel file imports in Client Components force bundlers to load entire libraries. Use direct imports or Next.js optimizePackageImports.

Missing loading.tsx causes full-page spinners instead of granular streaming. Missing error.tsx lets errors crash parent layouts instead of being contained.

Components handling data fetching, business logic, state, and rendering are hard to test and maintain. Decompose by responsibility.

Without error boundaries, a single component failure crashes the entire page. Use error.tsx and granular ErrorBoundary wrappers.

API routes with business logic are hard to test, audit, and secure. Keep route handlers under 100 lines by delegating to service classes. [CWE-1064]

API routes without rate limiting enable brute force, DDoS, and credit exhaustion attacks. Apply tiered rate limits as the first middleware. [CWE-770 · A04:2021]

Returning raw error messages or stack traces leaks implementation details. Return generic messages with a requestId for server-side debugging. [CWE-209]

State-changing API routes without CSRF validation allow cross-site request forgery. Validate tokens on POST/PUT/PATCH/DELETE with known exemptions. [CWE-352 · A01:2021]

Inconsistent error handling with thrown exceptions, returned nulls, and ad-hoc error objects makes callers fragile. Use a discriminated union ServiceResult type.

Creating new components or utilities without checking if one already exists leads to duplicated logic and inconsistency. Search existing code first.

Bare console.log statements with no context make production debugging impossible. Use scoped loggers with errorId, userId, and structured metadata.

Same logic duplicated in 3+ places creates consistency bugs and maintenance burden. Extract to the appropriate layer after the third occurrence.

Using useEffect + useState for data fetching creates waterfalls, loading spinners, and unnecessary API routes. Use async Server Components instead.

Pages that block until all data loads show nothing until everything is ready. Wrap slow components in Suspense to stream content progressively.

Serial await statements for independent data fetches create request waterfalls. Use Promise.all to parallelize and cut load times by 2-5x.