React (general) implementation checklist

Utilize React.lazy and Suspense to split the main bundle into route-specific chunks, reducing the initial JavaScript payload size.

Use the React DevTools Profiler to identify and eliminate redundant renders in expensive components using React.memo or the React Compiler.

Verify all images use modern formats (WebP/AVIF), include explicit width/height to prevent Layout Shift, and implement lazy loading for off-screen content.

Run source-map-explorer or a similar bundle analyzer to identify and replace oversized or duplicate third-party dependencies.

Ensure all useEffect, useMemo, and useCallback hooks have complete dependency arrays to prevent stale closures or infinite loops.

Set explicit staleTime and gcTime in React Query or SWR to prevent excessive background refetches and unnecessary network traffic.

Wrap the application root and high-risk feature modules in Error Boundaries to prevent a single component crash from unmounting the entire tree.

Verify that all forms manage 'isSubmitting' and 'isValid' states to prevent double-submissions and provide immediate user feedback.

Verify that Context providers only pass memoized values to avoid triggering re-renders in all consumer components when the provider's parent renders.

Ensure every data-driven component has defined skeleton screens or empty-state UI to prevent layout jumping during fetch operations.

Ensure all interactive elements are reachable via Tab and that focus is programmatically moved when opening or closing modals and drawers.

Verify that custom UI components (tabs, accordions, dropdowns) use correct aria-expanded, aria-controls, and role attributes for screen readers.

Validate that all text-to-background combinations meet WCAG AA standards (minimum 4.5:1 ratio) using automated linting or browser tools.

Replace non-semantic div/span click handlers with actual button or anchor tags to ensure native keyboard support and accessibility tree mapping.

Add a hidden 'Skip to Main Content' link at the start of the DOM to allow keyboard users to bypass navigation menus.

Enable strict mode in tsconfig.json and eliminate 'any' types to ensure type safety across component props and API responses.

Execute integration tests using React Testing Library for 'Happy Path' scenarios like user authentication and core transaction flows.

Use Mock Service Worker (MSW) to simulate 404, 500, and timeout errors to verify UI resilience under failure conditions.

Utilize Husky to run ESLint and Prettier before every commit to ensure code consistency and prevent syntax errors in the repository.

Check that no sensitive server-side keys are prefixed with VITE_ or NEXT_PUBLIC_, which would expose them to the client-side bundle.

Use DOMPurify when rendering strings through dangerouslySetInnerHTML to prevent Cross-Site Scripting (XSS) vulnerabilities.

Configure CSP headers to restrict script execution to trusted domains and block unauthorized inline scripts.

Run 'npm audit' or 'yarn audit' and resolve high-risk vulnerabilities in the node_modules tree.

Connect a service like Sentry to capture unhandled exceptions and stack traces from production users for proactive debugging.

Configure the build pipeline to strip console.log and console.debug statements from production builds to prevent information leakage.