React Performance & Optimization

Performance in React apps can be thought of in 2 ways:

1. Loading Performance - Compressing & loading code/assets (mostly Non-React things)
2. Runtime Performance - CPU & rendering issues (mostly React-specific things)

Loading vs. Runtime

Loading Performance - This is a measure of how fast the content is loaded when a user visits your webpage. Some specific metrics are First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), TTI (Time to Interactive), and maybe a "Speed Index".

Runtime Performance - This is a measure of how "smooth" your application runs and functions after the initial load. Some specific metrics for this might be "frame rate", "CPU", and "Memory Usage".

Loadtimes (Measure)

• PageSpeed Insights
• WebPageTest.org
• Lighthouse
• UnLightHouse

Loadtimes (Optimize)

Send as little code/media as possible over the network, and optimize everything

• Utilize GZip compression server-side to compress all in-flight HTTP requests
• Optimize all images and videos included in the bundle
  • Lazy load images
• Building and Minifying all project assets to CSS / JavaScript
• Various Methods of Code Splitting
  • Vite bundles will have some code-splitting done by default
  • What is Lazy Loading & how to use lazy and Suspense to lazy-load components or routes in your React app
• Server-Side Rendering (SSR) and Static Site Generation (SSG) can improve the First Contentful Paint and Time to Interactive metrics, as they allow the browser to render the page more quickly (and are accessible by search engines).
  • Adding SSR / SSG to an existing project is no small feat. Try to evaluate early on if your application would benefit from these technologies so you can configure your project the right way from the start.

Runtimes (Measure)

Modern React is pretty fast by default. Unless you're building complex components/features - you don't need to reach for optimization tactics until you notice a component/feature behaving slowly. The best advice to follow:

1. Don't optimize too soon
2. Know what to measure

In modern React apps, most of the performance issues you'll run into can probably be simplified down to to rendering problems (either too slow, or too much). The visual in the tweet below explains how rendering can cause cascading effects across a large application.

Read more from Alex Sidorenko in his series A Visual Guide to React Rendering.

Other helpful resources for understanding how to measure runtime performance in React apps:

• Measuring Performance in Chrome
• Debugging in the Browser
• Devtools Coverage - shows how much of your code is being shipped but then NOT running (while session is recording)
• Use the Profiler to measure rendering performance of a React tree programatically
• How to Detect Slow Renders in React?
• How many re-renders are too many?

Runtimes (Optimize)

Runtime performance issues usually boil down to two types of issues:

1. Fixing Slow Renders

• Fix the slow render before you fix the re-render
• Understand that ES6 is single-threaded, therefore laggy behavior can happen easily
  • Offload expensive work that shouldn't block rendering to Web Workers

2. Fixing Profuse Re-Renders

• Use Refs for state & values that shouldn't cause re-renders (or that aren't rendered at all)
• Be careful of setting state in an effect or outside of event-handlers / conditions

Memoization & Virtualization can solve slow renders or profuse re-renders in different ways:

• use memo to memoize components and cut down pointless re-renders of child components when their props aren't changing
  • You should probably use memo() around any component immediately under Context Provider
  • See memo() in action with a visual example
• use useMemo() to memoize specific work within your components, cutting down the render time by skipping it if the recalculation isn't needed
  • A Visual Guide to React Rendering - useMemo
• use useCallback() to memoize (cache) functions that are created for use in your components, cutting down the render time by skipping it if the recalculation isn't needed
  • A Visual Guide to React Rendering - useCallback
• use virtualization for efficiently rendering large lists of datasets, cutting down render time

Misc

More resources about optimizing JavaScript/React performance

• Improving React Interaction Times by 4x
• Improve the Performance of your React Forms
• One Simple Trick to Optimize React Re-Renders
• Speeding up the JavaScript ecosystem - one library at a time
• Making Tanstack Table 1000x faster with a 1 line change
• Optimizing React performance without refs and memo
• React Performance Checklist - Cory House