Explore

Every <img> must have a meaningful alt attribute. Without alt text, screen readers either skip the image entirely or read the raw filename ("DSC_0042.jpg"), leaving visually impaired users completely unable to understand the content.

Text must meet WCAG AA contrast ratio: 4.5:1 for normal text, 3:1 for large text. Low-contrast text is unreadable for users with low vision, color blindness, or anyone using a screen in bright sunlight — affecting up to 8% of male users (color blindness alone).

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

Pin exact versions for all dependencies in production (no ^, ~, or * ranges). Unpinned dependencies silently pull in new versions that can introduce breaking changes, security vulnerabilities, or performance regressions — and you won't know until production breaks.

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

Store all environment-specific configuration (API URLs, database connections, feature flags) in environment variables, never in source code. Hardcoded config means your staging code talks to production databases, your API keys are in git history, and deploying to a new environment requires code changes.

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

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

Set security headers on all HTTP responses: Content-Security-Policy, X-Content-Type-Options, X-Frame-Options, Strict-Transport-Security. Missing headers leave your app vulnerable to XSS, clickjacking, MIME sniffing, and protocol downgrade attacks.

Apply rate limiting to all public-facing API endpoints. Without rate limits, a single attacker can overwhelm your server, exhaust your database connections, or brute-force authentication — taking down the service for all users.

Lazy-load images, components, and data that are below the initial viewport fold. Loading everything upfront makes the user wait for content they haven't scrolled to yet — increasing Time to Interactive and burning mobile data on content the user may never see.

Serve images in modern formats (WebP/AVIF), at appropriate dimensions, and with width/height attributes. Unoptimized images are typically the largest assets on a page — a single uncompressed hero image can be larger than all your JavaScript combined, destroying load times on mobile.

Audit and minimize third-party scripts (analytics, chat widgets, ad trackers). Each third-party script adds DNS lookups, TLS handshakes, and JavaScript execution that blocks the main thread — a single chat widget can add 500ms+ to page load and degrade Core Web Vitals scores.

Extract event handlers defined inline in JSX to named functions or useCallback. Inline functions create new references every render, breaking React.memo and causing unnecessary child re-renders.

Minimize use of arbitrary values like [w-347px], [color:#1a2b3c]. Arbitrary values bypass Tailwind's design tokens, making the design system meaningless and creating one-off values that are impossible to maintain consistently.

Never use SELECT * in production code. SELECT * fetches every column including large text/blob fields you don't need, wastes bandwidth, breaks when columns are added, and prevents the database from using covering indexes.

Missing cleanup in useEffect for subscriptions, timers, event listeners, and AbortControllers causes memory leaks, stale callbacks, and state updates on unmounted components.

Normalize your database schema to at least 3NF to eliminate data duplication. Denormalized data means the same fact is stored in multiple places — when you update one copy, the others become stale, creating data inconsistencies that are nearly impossible to track down.

Direct SQL, curl, file_put_contents, and mail() bypass WordPress caching, hooks, security filters, and host compatibility. Use WP_Query, wp_remote_get, WP_Filesystem, and wp_mail.

wp_cache_get/set with a persistent backend (Redis/Memcached) eliminates redundant database queries across requests. Without it, identical queries run on every page load.

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

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

Use factory functions (e.g., `createUser({role: 'admin'})`) instead of static JSON fixtures. Factories let you create exactly the data each test needs with sensible defaults, while fixtures force you to maintain large JSON files where a change to one test's data breaks another test.

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