React Launch Checklist: 32 Essential Steps

Execute your build command and resolve every warning. Build warnings often indicate actual bugs — unused imports, missing keys, deprecated APIs — that manifest as runtime issues in production.

Wrap your root component with `<React.StrictMode>`. It double-invokes effects and renders in development to catch impure components, missing cleanup functions, and deprecated API usage before they cause production bugs.

Ensure all API URLs, feature flags, and configuration values are set for production. Check that development-only variables (debug flags, test API keys) are not leaking into the production bundle.

Search for console.log, console.warn, debugger statements, and TODO comments. Use an ESLint rule like `no-console` set to error for production builds. Debug output in production leaks implementation details.

Generate source maps during build but do not serve them publicly. Upload them to your error tracking service (Sentry, Bugsnag) so stack traces are readable. Use hidden-source-map mode in your bundler.

Configure `@/` or `~/` path aliases in your tsconfig.json and bundler config. This eliminates fragile relative imports like `../../../components/Button` and makes refactoring easier post-launch.

Wrap major sections (sidebar, main content, widgets) with Error Boundaries so a crash in one section does not take down the entire page. Show a meaningful fallback UI with a retry button, not a white screen.

Every component that fetches data should handle loading (skeleton or spinner), error (retry button with error message), and empty (helpful empty state) scenarios. Use React Query or SWR for built-in state management.

Set up Sentry, Bugsnag, or similar to capture unhandled errors and promise rejections. Configure user context, breadcrumbs, and source maps. Set up alerts for new error types and error rate spikes.

Listen for `online`/`offline` events and show a banner when the user loses connection. Queue failed requests for retry when connectivity returns. Use the `navigator.onLine` API for initial state.

Test with empty arrays, null values, extremely long text, Unicode characters, and RTL text. These edge cases cause layout breaks, truncation bugs, and crashes that only appear with real user data.

Write integration tests for your core user flows — signup, login, checkout, main feature usage. Use React Testing Library for component tests that verify behavior, not implementation. Aim for 80% coverage on critical paths.

Write E2E tests for your 5-10 most important user journeys. Run them against your staging environment before every release. E2E tests catch integration issues that unit tests miss — broken API contracts, auth flows, navigation.

Test on Chrome, Firefox, Safari, and Edge at minimum. Test on iOS Safari and Android Chrome for mobile. Use BrowserStack or LambdaTest for devices you do not have. Safari WebKit differences cause the most cross-browser bugs.

Test every form with empty submissions, invalid email formats, too-short passwords, special characters, and SQL injection attempts. Verify that validation messages are clear and that the form prevents submission until all errors are fixed.

Configure ESLint with `eslint-plugin-react-hooks` and `eslint-plugin-jsx-a11y`. Run `tsc --noEmit` to verify type safety. Both should be part of your CI pipeline and block deployments on failure.

Wrap route components with `React.lazy(() => import('./Page'))` and a `<Suspense>` boundary. This splits your bundle per route so users only download the code for the page they are visiting.

Serve images at appropriate sizes for each viewport. Use `<picture>` with WebP/AVIF sources and fallback. Add `loading='lazy'` to below-the-fold images and `fetchpriority='high'` to hero images.

Use `source-map-explorer` or `webpack-bundle-analyzer` to visualize your bundle. Target under 200KB gzipped for initial load. Look for large dependencies, duplicated packages, and unused exports.

Use the React DevTools Profiler to record user interactions and identify components that re-render unnecessarily. Fix with React.memo, useMemo, or by restructuring state to minimize re-render scope.

Add `<link rel='preload'>` for fonts, critical CSS, and above-the-fold images. Use `<link rel='prefetch'>` for likely next-page resources. This tells the browser to start fetching before the rendering code requests them.

Never use `dangerouslySetInnerHTML` with unsanitized input. If you must render HTML, sanitize it with DOMPurify first. This prevents XSS attacks where attackers inject malicious scripts through form inputs or URL parameters.

Ensure all API requests use HTTPS. Configure your API's CORS policy to only allow requests from your production domain. Never use `Access-Control-Allow-Origin: *` in production.

Store JWTs in httpOnly cookies, not localStorage. localStorage is accessible to any JavaScript on the page, including XSS payloads. HttpOnly cookies are invisible to client-side JavaScript.

Configure GitHub Actions to run lint, type-check, tests, and build on every PR. Add Lighthouse CI for performance regression detection. Block merges when any check fails.

Set long cache TTLs (1 year) for hashed static assets (JS, CSS, images). Set short TTLs or no-cache for HTML files. This ensures users get updated HTML that references the latest asset hashes.

Execute `npm audit` and address all high and critical severity vulnerabilities. Use `npm audit fix` for compatible updates. For breaking changes, evaluate each package and update manually or find alternatives.

Walk through every major user journey on your staging environment: registration, login, core features, payment, logout. Test on both mobile and desktop. Have someone outside the development team do this too.

Open your analytics tool's real-time view and navigate through your staging site. Verify page views, events, and conversions are tracked. Missing analytics on launch day means losing data you can never recover.

Configure uptime monitoring (Better Stack, UptimeRobot) and real-user monitoring (Sentry Performance, Datadog RUM). Set alert thresholds for response time degradation and error rate spikes.

Check every page for unique title tags, meta descriptions under 160 characters, Open Graph images for social sharing, and canonical URLs. Missing meta tags on launch day means search engines index incomplete information that is hard to correct later.

Write down the exact steps to revert to the previous version if something goes wrong. Include database migration rollbacks, feature flag toggles, and DNS changes. Under launch-day pressure, a documented rollback plan prevents panicked improvisation.