How to Optimize a React App for Production

Always use the production build of React when deploying. The production build minifies code, removes development warnings, and enables additional optimizations. If using Create React App, run npm run build. If using Vite, run npm run build. Never deploy the development server to production as it is significantly slower.

Use a bundle analyzer tool to visualize what is inside your JavaScript bundle. Look for large third-party libraries that might have lighter alternatives. For example, replace moment.js with date-fns, or lodash with native JavaScript equivalents. Removing or replacing one heavy library can dramatically reduce bundle size.

Use React.lazy and Suspense to split your bundle at route boundaries. Each page becomes a separate chunk that loads only when navigated to. A user visiting only the home page does not download the code for the settings page. This directly improves initial load time.

Use React.memo on components that re-render too often without their props changing. Use useMemo for expensive calculations that run on every render. Use useCallback to stabilize function references passed as props. Profile your app with React DevTools Profiler first to identify actual bottlenecks before applying memoization.

Rendering thousands of DOM elements at once is very slow. Use a list virtualization library like react-window or react-virtual. These libraries only render the items currently visible in the viewport, plus a small buffer. As the user scrolls, items enter and exit the rendered set. This keeps the DOM small regardless of list size.

Images are often the largest assets on a page. Compress images before deploying. Use modern formats like WebP which offer much smaller file sizes than JPEG or PNG at similar quality. Use the loading='lazy' attribute on images below the fold so the browser only downloads them when they are about to enter the viewport.

Configure your web server to send long cache headers for static assets like JavaScript chunks, CSS, and images. These assets have hashed filenames that change only when content changes, making them safe to cache for months. HTML files should have short or no cache times since they reference the latest asset filenames.

Use Google Lighthouse in Chrome DevTools to measure your app's performance, accessibility, and best practices. Focus on Core Web Vitals metrics: Largest Contentful Paint measures loading speed, Cumulative Layout Shift measures visual stability, and Interaction to Next Paint measures responsiveness. Run these audits after every significant change to catch regressions early.