7 React App Optimisation Techniques

React is fast by default for small apps. As an app grows, with more components, more data and more third-party code, it can start to feel slow: pages take longer to load, typing lags and lists stutter. The good news is that most React performance problems come from a handful of causes, and each has a well-known fix.

This post covers seven practical techniques for optimising a React app, plus tips for build times and mobile performance.

What is React app optimisation?

React app optimisation is the work of making a React application load faster, respond faster to user input and use less memory and network. In practice it means two things: sending less JavaScript and data to the browser, and making React do less work when state changes. Our post on why to use React for your next web application covers the basics if you are new to it.

7 React app optimisation techniques

1. Measure before you optimise

Guessing wastes time. Use the Profiler tab in React Developer Tools to see which components render, how often and how long they take. Use Lighthouse or the Performance panel in Chrome DevTools to check load performance and Core Web Vitals such as Largest Contentful Paint and Interaction to Next Paint. Fix the biggest problem first, then measure again.

2. Avoid unnecessary re-renders

When state changes, React re-renders the component that owns it and all of its children. Ways to keep that work small:

• Keep state as close as possible to the components that use it, instead of lifting everything to the top of the tree.

• Split large contexts so a change in one value doesn't re-render every consumer.

• Use React.memo, useMemo and useCallback for components and values that are expensive to recompute.

• Turn on the React Compiler. Version 1.0 was released in October 2025, and it adds memoisation automatically at build time, which removes much of the manual work above.

For larger apps, the choice of state management also matters. Our guide to advanced state management in React compares the options.

3. Split your code and load it lazily

Don't make users download the whole app to see one page. Use React.lazy with Suspense to load components when they are needed, and split by route so each page loads only its own code. Modern bundlers such as Vite and frameworks such as Next.js do route-level splitting for you. Lazy-load heavy components that aren't visible at first, such as charts, editors and modals.

4. Virtualise long lists

Rendering thousands of rows creates thousands of DOM nodes, which is slow to render and scroll. List virtualisation renders only the rows currently on screen. Libraries such as TanStack Virtual and react-window make this straightforward for lists, tables and grids.

5. Optimise images, fonts and third-party scripts

Images are often the heaviest part of a page. Serve them in modern formats such as WebP or AVIF, size them for the device with responsive srcset, and lazy-load images below the fold. Self-host fonts and limit the number of font weights. Audit third-party scripts such as analytics, chat widgets and tag managers, because each one adds weight and main-thread work.

6. Render on the server where it helps

A purely client-rendered app shows a blank page until the JavaScript loads. Server-side rendering (SSR) and static generation send ready-made HTML, so users see content sooner and search engines can index it easily. React Server Components go further by keeping some components on the server so their code never reaches the browser. Next.js and React Router's framework mode support these patterns. See our comparison of Next.js vs React.

7. Keep the interface responsive during heavy updates

Some updates, such as filtering a big list as the user types, are expensive no matter what. React's useTransition and useDeferredValue let you mark these updates as lower priority, so typing and clicking stay smooth while the heavy work finishes in the background. For input-driven network requests, debounce them so you don't fire a request on every keystroke.

How do I optimise a mobile React app?

Mobile devices have slower CPUs and less reliable networks, so the techniques above matter even more there. Test on a mid-range phone with network throttling, not just on a developer laptop. Keep the initial JavaScript small, compress images aggressively, and consider service workers to cache assets so repeat visits are fast.

If you are building a native app with React Native, the same principles apply. React Native also has its own tools, such as the Hermes engine and fast list components like FlashList. See our list of React Native component libraries.

How do I reduce build time in a React app?

• Move off Create React App. It was deprecated in February 2025. Vite, or a framework such as Next.js, builds and reloads much faster.

• Cache builds in CI so unchanged packages and dependencies aren't rebuilt every time.

• Trim dependencies. Remove unused packages and replace heavy libraries with lighter ones where you can.

• Split a large monorepo into packages with a build tool that only rebuilds what changed.

How do I increase page speed in React?

Start with what users download and what blocks the first render: split code by route, server-render or statically generate pages that need to appear fast, optimise images and fonts, and remove or delay non-essential scripts. Then fix runtime slowness with profiling, memoisation or the React Compiler, list virtualisation and transitions. Re-measure after every change so you know what helped.

Conclusion

React performance work is mostly about doing less: less JavaScript sent to the browser, fewer components re-rendered and fewer DOM nodes on screen. Measure first, fix the biggest bottleneck, and build performance checks into your process so the app stays fast as it grows.

Sterling Technolabs builds and optimises React applications as part of our web development services. If you need extra hands, read our guide to hiring professional React developers or get in touch.