Improve React App Performance

React uses a virtual DOM and reconciliation process to efficiently update the real DOM. When component state or props change, React re-renders the component and all its descendants, computes the difference between the new virtual DOM and the previous one (diffing), and applies only the changed nodes to the real DOM (reconciliation). This process is generally fast, but complex component trees with deeply nested components and expensive render functions can make reconciliation slow enough to cause user-visible janky animations and delayed interactions.

React's default behavior is to re-render a component whenever its parent re-renders, regardless of whether the component's own props changed. This means that a state update at the top of the component tree causes every component in the tree to re-render, even those that are displaying completely unrelated data. In a complex application with hundreds of components, this cascading re-render behavior can accumulate to 50 to 200ms of JavaScript execution time per interaction, making the UI feel sluggish.

The React DevTools Profiler is the essential tool for measuring component render times and identifying which components are re-rendering unnecessarily. Record a profiling session during a typical user interaction and examine the flame chart to see which components rendered, how long each render took, and why each component rendered (prop change, state change, or parent re-render). Components with frequent renders and high render durations are the highest-priority targets for optimization.

Concurrent Mode, available in React 18's createRoot API, allows React to interrupt expensive rendering work to process higher-priority updates like user input. Without Concurrent Mode, a slow render blocks all other interactions until it completes. With Concurrent Mode, React can pause a low-priority render mid-way through to process a high-priority user input event, then resume the paused render. This makes applications feel significantly more responsive under heavy rendering load, even before any code-level optimizations are applied.

React.memo wraps a functional component and prevents it from re-rendering when its props have not changed, using shallow equality comparison by default. Adding React.memo to components that receive the same props frequently—list items, icons, header components, navigation elements—can prevent substantial unnecessary rendering work. The caveat is that if a component receives object or function props that are recreated on every render, React.memo's shallow comparison will always find them changed and re-render anyway.

The useCallback hook memoizes function references across renders, preventing child components wrapped in React.memo from re-rendering when event handlers are recreated. Without useCallback, a parent component that renders an onClick={handleClick} prop on a child creates a new function reference on every render. The child's React.memo sees a new function prop and re-renders even though the function behavior is identical. Wrap event handlers passed as props to memoized children with useCallback, using the dependency array to control when the handler is recreated.

The useMemo hook memoizes expensive computed values, preventing their recalculation on every render. If a component computes a filtered, sorted, or transformed version of a large array on every render, that computation runs even when the component re-renders due to unrelated state changes. Wrapping the computation in useMemo with the source array as a dependency ensures it only runs when the source data changes. Use useMemo selectively—for computations taking more than 1ms—rather than wrapping everything, as the memoization overhead itself has a cost for trivially fast computations.

Context value changes trigger re-renders of all components that consume the context, regardless of whether the specific value they use changed. A Context with many values in a single object will re-render all consumers when any single value changes. Split contexts by update frequency: put frequently updating values (like user preferences) in a separate context from rarely updating values (like user profile data). Alternatively, use a state management library like Zustand or Jotai that provides selector-based subscriptions so components only re-render when the specific state slice they use changes.

Code splitting with React.lazy() and dynamic import() splits your JavaScript bundle into route-level or feature-level chunks that are loaded only when needed. Instead of shipping all routes' code in a single bundle that users must download and parse before seeing anything, ship only the code for the current route and lazy-load other routes on demand. React.lazy() combined with Suspense boundaries makes this pattern simple to implement: wrap your route components in React.lazy() and wrap your router in a Suspense component with a loading fallback.

Bundle analysis with webpack-bundle-analyzer or vite-bundle-visualizer reveals which dependencies account for the largest fractions of your bundle size. It is common to discover that a single dependency accounts for 20 to 40% of total bundle size, and that the dependency is either unused, partially used, or can be replaced with a smaller alternative. Common oversized dependencies include moment.js (replaceble with date-fns or Temporal), lodash (many functions available natively in modern JavaScript), and chart libraries that include all chart types even when only one is used.

Tree shaking eliminates unused exports from dependencies when your bundler supports ES module imports. Named imports (import { specific } from 'library') are tree-shakeable; namespace imports (import * as lib from 'library') are not. Ensure your build configuration enables tree shaking for all dependencies by using ES module builds when available. Some libraries provide separate packages for individual functions—importing lodash/isEqual instead of lodash imports only the isEqual function without the entire lodash library.

Preloading critical routes and assets improves perceived navigation performance after the initial page load. Use the prefetch link attribute to download route chunks during idle time before users click links that require them. With React Router v6, the prefetch prop on Link components triggers chunk prefetching on hover, ensuring the chunk is already downloaded by the time the user clicks. This makes navigation feel instant even for lazy-loaded routes, while still benefiting from the smaller initial bundle that code splitting provides.

Co-locate state as close to where it is used as possible. State defined at the top of the component tree causes all descendants to re-render on every change. State that is only used by a specific sub-tree should live at the highest common ancestor of that sub-tree, not at the app root. Before reaching for a global state management solution, evaluate whether local component state, state lifted to a parent, or a custom hook that co-locates state with its consuming components is sufficient for the use case.

Zustand, Jotai, and Recoil are popular alternatives to Redux that provide more granular subscription models. Rather than all components receiving the entire store and re-rendering when any part changes, components subscribe to specific state slices and only re-render when those slices change. A component that displays the current user's name does not need to re-render when the shopping cart contents change. Selector-based subscriptions can reduce the number of renders per user interaction by 50 to 80% in complex applications.

Avoid putting derived state in your state management store. If you have a list of products and need to display filtered products, do not store the filtered list in state—derive it from the source list using useMemo or a selector function. Storing derived state means you must keep it synchronized with the source state, creating opportunities for inconsistencies and requiring additional renders to propagate updates. Deriving state on demand from a single source of truth is both simpler and faster.

Batching state updates reduces the number of render cycles triggered by related state changes. React 18 automatically batches all state updates that occur within event handlers and async operations. In earlier React versions, state updates outside of React event handlers (in setTimeout, promise callbacks, or native event listeners) were not batched and triggered separate renders. If you are on React 17 or earlier, use ReactDOM.unstable_batchedUpdates() to manually batch related state updates that occur outside of React's event system.

Rendering large lists of items—thousands of rows in a table, a long social media feed, an infinite scroll grid—causes React to render all items into the DOM, even those far below the scroll position that users cannot see. A list of 10,000 items might render 10,000 DOM nodes, each consuming memory and causing expensive layout calculations. Virtual scrolling (also called windowing) renders only the items currently visible in the viewport plus a small buffer, maintaining a constant DOM node count regardless of the total list size.

React-window and React-virtualized are the standard libraries for virtual scrolling in React applications. React-window is the more modern and lightweight option, providing FixedSizeList and VariableSizeList components for one-dimensional lists, and FixedSizeGrid for two-dimensional grids. Implementing virtual scrolling on a list of 10,000 items typically reduces DOM node count from 10,000 to approximately 50, which can improve initial render time from several seconds to under 100ms and reduce scroll jank significantly.

Key props in list rendering must be stable, unique, and based on the item's identity rather than its index in the array. Using array index as a key causes React to mismatch DOM nodes when items are inserted, deleted, or reordered—React sees that the item at index 3 changed rather than that a new item was inserted at index 0. This causes unnecessary DOM mutations and can cause visual glitches in components with internal state. Use a unique, stable identifier from your data—a database ID, UUID, or slug—as the key for every list item.

Memoize list item components with React.memo to prevent re-rendering all items when the parent list component receives a state update. In a list of 100 items, if the user selects one item (changing the 'selected' state), all 100 items will re-render by default. With React.memo and careful prop design—passing only the item data and a stable callback—only the item whose data changed (or whose selection state changed) will re-render. This optimization alone can reduce list interaction latency by 80 to 95% for large lists.

Lazy loading images that are below the initial viewport prevents downloading resources before they are needed. Add the loading='lazy' attribute to all img elements that are not in the initial viewport. For React components, implement an Intersection Observer-based lazy loading hook that begins loading images only when they scroll near the viewport, with configurable thresholds. Lazy loading images below the fold typically reduces initial page data transfer by 30 to 60% for image-heavy pages.

Next.js's Image component (or its equivalents in other React meta-frameworks) automatically handles image optimization: serving modern formats (WebP, AVIF) to browsers that support them, generating responsive srcset attributes for different screen sizes, lazy loading images below the fold, and preventing Cumulative Layout Shift by reserving space with known dimensions. If you are building a custom React application, implement similar optimizations manually or use an image optimization CDN that performs format conversion and resizing automatically.

Prevent Cumulative Layout Shift from images by specifying width and height attributes or using CSS aspect-ratio to reserve space before images load. Without reserved dimensions, the browser renders content around the image placeholder and then shifts all content when the image loads and takes its natural dimensions. Specifying explicit dimensions or intrinsic aspect ratios is the simplest and most effective fix for image-caused layout shifts, which are one of the most common CLS issues in React applications.

Skeleton loading states improve perceived performance by showing placeholder UI that matches the layout of the content being loaded. Rather than showing a spinner that gives no information about the page structure, render a skeleton that closely approximates the shape, size, and layout of the incoming content. This reduces perceived loading time even when actual loading time is unchanged, because users can orient themselves to the page structure while content loads. Libraries like react-loading-skeleton provide pre-built skeleton components that are easy to integrate.

Real User Monitoring (RUM) for React applications captures actual user interaction timing including Time to Interactive, Long Task durations, and Core Web Vitals scores from real devices and network conditions. Development profiling with React DevTools represents performance on your development machine with a fast CPU and network connection, which can be 5 to 10 times faster than a typical mobile device. Production RUM data shows which users are experiencing performance problems, on what devices, and on which pages, enabling targeted optimization.

Track React-specific metrics in production including component render times, hydration duration (for server-rendered React applications), and client-side navigation performance. Hydration—the process of attaching React event handlers to server-rendered HTML—can take 2 to 10 seconds on slow mobile devices for complex applications. Monitoring hydration duration highlights opportunities to reduce JavaScript bundle size, defer non-critical hydration, or adopt partial hydration strategies that hydrate only interactive components.

Error boundary monitoring captures React component tree crashes that would otherwise result in blank screens with no error reporting. Wrap your application in error boundaries at multiple levels of the component hierarchy and report caught errors to your error tracking system with the component stack trace. React 16's error handling guarantees that errors do not propagate past boundaries, preventing a bug in one feature from crashing the entire application. Without error boundary monitoring, JavaScript rendering errors can cause silent user-facing failures that never reach your engineering team.

Continuous Lighthouse CI or similar performance testing integrated into your deployment pipeline establishes performance gates for React application changes. Lighthouse measures Core Web Vitals, JavaScript bundle size, Time to Interactive, and other performance metrics in a controlled environment. Configure CI to fail or require review for pull requests that degrade key metrics beyond acceptable thresholds. This prevents performance regressions from shipping without explicit acknowledgment of the trade-off, making performance a first-class consideration in code review.