Explore

Switching between controlled (value prop) and uncontrolled (defaultValue/no value) patterns on the same input causes React warnings and unpredictable behavior.

Creating new objects, arrays, or functions inline in JSX causes child components to re-render on every parent render due to referential inequality.

Rendering thousands of DOM nodes for long lists causes slow initial render, high memory usage, and scroll jank. Use virtualization (react-window, TanStack Virtual).

Running expensive calculations (sorting, filtering, transforming large datasets) on every render wastes CPU cycles. Use useMemo to cache results.

Putting too much state in a single React Context causes all consumers to re-render when any value changes. Split into focused contexts.

Lifting state higher than necessary causes unnecessary re-renders in the parent and all siblings. Keep state as close as possible to where it is consumed.

Passing props through 3+ levels of intermediate components that don't use them creates tight coupling and maintenance burden. Use context, composition, or state management.

Duplicating stateful logic (useState + useEffect patterns) across multiple components leads to inconsistency and maintenance burden. Extract into reusable custom hooks.

Monolithic components with deeply nested ternaries and conditionals are hard to read, test, and extend. Use composition patterns (children, render props, compound components).

dangerouslySetInnerHTML bypasses React's XSS protection. Always sanitize HTML from external sources with DOMPurify before rendering. [CWE-79 · A03:2021]

String concatenation in database queries creates injection vulnerabilities. Always use parameterized queries or ORM query builders. [CWE-89 · A03:2021]

Server Action arguments are deserialized from untrusted HTTP requests. Validate every input with Zod to prevent type confusion and injection attacks. [CWE-20, CWE-502 · A08:2021]

Server Actions are public HTTP endpoints not protected by middleware or layout guards. Always verify authentication inside each action. [CWE-862 · A01:2021]

App Router route handlers (GET, POST, PUT, DELETE) are public HTTP endpoints. Every exported function must independently verify auth — middleware alone is insufficient. [CWE-862 · A01:2021]

Next.js has no built-in rate limiting. Without it, login, signup, password reset, and Server Actions are vulnerable to brute force and credential stuffing. [CWE-799, CWE-307 · A04:2021]

API routes that construct file paths from user input without sanitization allow attackers to read or write arbitrary files using ../ sequences. [CWE-22 · A01:2021]

Unvalidated redirect URLs enable phishing attacks via your domain. Always validate against an allowlist or restrict to relative paths. [CWE-601 · A01:2021]

Next.js middleware can be bypassed (CVE-2025-29927). Always enforce auth checks inside route handlers and Server Actions as defense-in-depth. [CWE-287 · A01:2021]

Session cookies without HttpOnly, Secure, and SameSite are vulnerable to XSS theft and CSRF. The Next.js cookies() API does not enforce secure defaults. [CWE-614, CWE-1004 · A05:2021]

Accepting file uploads without validating MIME type, size, extension, and filename sanitization enables code execution, storage abuse, and path traversal. [CWE-434 · A04:2021]

Next.js Server Actions rely on Origin header checks, not CSRF tokens. Reverse proxies and misconfigured allowedOrigins can bypass this protection. [CWE-352 · A01:2021]

Setting Access-Control-Allow-Origin to wildcard or reflecting the request Origin lets any website make authenticated requests to your API. [CWE-942 · A05:2021]

Props passed to Client Components are visible in the browser. Never pass API keys, tokens, or full database records to client code. [CWE-200 · A01:2021]

Misconfigured caching of Next.js ISR/SSR responses allows attackers to poison cached pages with blank or malicious content, causing DoS for all users. [CWE-444 · A05:2021]