Making Your React Apps Perform At Scale

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

As you add more components to your React application, you'll start to notice performance issues. Maybe data isn't loading as fast or you notice that things are happening out of order. There are tools and techniques you can use to handle these kind of issue at a large scale. In this talk, attendees will learn how to analyze their React apps for solvable issues and learn some state management and async handling techniques.

This talk has been presented at React Summit 2020, check out the latest edition of this React Conference.

FAQ

Malisha is a developer advocate at Conducto, a company that provides CICD tools for deploying apps without using YAML.

To improve the performance of a React application, you can use performance testing tools, optimize API calls, implement lazy loading and code splitting, minimize resources, and refactor components for efficiency.

Common tools to test the performance of a React app include Lighthouse for initial performance scoring and the Profiler tool in Chrome DevTools for analyzing component load times.

Using a production build for performance testing is important because it provides the most accurate representation of what users experience, ensuring that performance improvements are relevant and effective.

Code splitting is a technique where you split your code into various bundles which can then be loaded on demand. This improves load times by only loading the necessary code, making React apps faster and more efficient.

Lazy loading enhances performance by loading components only when they are needed rather than during the initial load. This reduces the amount of code processed and resources used upfront, speeding up the app's overall performance.

The 'useMemo' hook in React is used to memoize expensive functions so that they only recompute when their dependencies change, reducing the number of times these functions need to execute and thus improving performance.

Yes, minimizing resources such as JavaScript, CSS, and images in the production build can significantly improve the performance of a React app by reducing the amount of data the browser needs to load and process.

Milecia McGregor
Milecia McGregor
21 min
17 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The video covers various techniques to improve the performance of React applications. It explains the importance of using a production build for performance testing, as it closely mirrors the user experience. Tools like Lighthouse and Chrome DevTools Profiler are recommended for performance analysis. The talk also highlights the benefits of code splitting and lazy loading to improve load times. Optimizing API calls and minimizing resources such as JavaScript, CSS, and images are discussed. The video also suggests techniques like virtualizing lists and caching data to keep React apps performant.

1. Introduction to Making React Apps Performant

Short description:

Hey, everybody. My name is Malisha and I'm a developer advocate with Conducto. Today I want to talk to you about making your React apps more performant. We'll discuss the initial React app, what happens over time, testing, keeping your app performant, cleaning up existing apps, and key takeaways.

Let's take a look. Hey, everybody. My name is Malisha and I'm a developer advocate with Conducto. And there we make these cool CICD tools where you can deploy your apps without using YAML, which is pretty awesome. And you can find me on the Internet, typically on Twitter at Flipped Coding.

So today I want to talk to you about making your React apps more performant, because we know how great it is working with a React app that has over 100 components. So before all of my talks, I'd like to give you a quick overview so that you can decide when to tune in and tune out of the talk. But to get started, we'll talk about your initial React react. So that shiny new create React app base. Then we'll talk about what happens over time and how you add these different layers and all of these new components and what happens to slow down your app in the first place. And we'll get into some of the testing you can do to find areas to improve your app. We'll talk about what you can do to keep your app performant, different tools and techniques you can use. And the fun part is talking about cleaning up an existing app to make it run a lot faster and get those precious milliseconds shaved off of your load time. And finally, we'll wrap up with just a few key takeaways and some things that I hope will be really useful just in your day to day job with React.

2. React App Complexity and Performance

Short description:

So when you're starting a new React app, it's clean and empty. But over time, as you add more components and features, the code becomes more complex and the app slows down. To find problem areas, run performance tests using a production build.

So to get started, we all know about that initial Create React app and how clean and empty it is. So when we're starting, we have this shiny new React app. It has basically nothing in it. There's this one really simple test. And our app is all of, what, 26 lines, basically. So you see, it's not really much structure here. Everything's clean. And if you just start adding on, it can get complex really fast. But you know what that looks like. We've all been there.

So what happens over time is that the software development lifecycle basically destroys all of that simplicity of having everything in the root folder, pretty much. And the reason for that, it's a lot of things. There are architectural decisions that are made. There are different features that are added. People organize folders and files differently. And so as you keep adding these components, not only does your project code get more complex to read through and find different bugs, but these components take rendering time. So as you add more of them, whether they're nested or it's on a new page or however you're using your app, as you add more components that need to be rendered, this naturally just slows down your application. So you'll have API calls that you're making, you'll need to do a sync page updates, and this triggers a lot of state changes and use effect hooks. And all of that takes time. And at first it seems like those few milliseconds, oh, whatever, 500 milliseconds, we can deal with that. But when you have 30 components that take that much time, you start to see that noticeably slower moving app and your users especially notice that.

So over time, this is more of what your app starts to look like. You have some different folders. You have a bunch of new components and helpers and all of your packages, of course. So things just get bigger and then you start having API calls and we'll get more into this a little bit later in the talk, but you see there's just more things going on. You have functions that are hit. You have just all of this stuff happening in one component. So imagine this 80 more times on the same page and you can see how quickly it will slow down your app. So to kind of help us find those particular problem areas in our application that really take the most loading time, we run some tests to see where we can improve things. So the first thing you want to do when you're running performance tests is make sure that you're using a production build.

3. Using Lighthouse and the Profiler Tool

Short description:

There's really not much point in running performance tests on a development build. Use the same version of your app that users will be working with. Make a minified production build and run it through unit tests. Use Lighthouse to get an initial performance score. Set the categories you want to check and determine if your app is up to standards. Lighthouse provides suggestions to improve your app's performance. The Profiler tool replaces the React Perf tool and allows you to profile components directly in the browser.

There's really not much point in running a whole lot of performance tests on a development build, even though there are some benefits. If you want to see the improvements where the users are having problems, you need to use the same version of your app that the users are going to be working with. So that is why in the beginning, go ahead and make your minified production build, get it through all of your unit tests first to make sure there's no other bugs you need to work out. Because sometimes when those tests fail, they're showing you places like, hey, this spot might need some refactoring because it's overly complex, or maybe you have a bug in there that's hitting an API that returns a 404. And it just keeps making that request because you have it on some kind of, I don't know, time out, click the button type thing. But use production build so that you get the most accurate results. And the first thing, one of the most common things is that you'll be using lighthouse to just get that initial performance score. So using this app as an example, you see it has some modals, there's some different pages, functions, APIs, all that good stuff. And what this looks like on the page is just a little budget app, nothing too fancy. And I have not spent this much money in one day, just for the record. That's just some leftover data from some stuff I was playing with. But anyways, the main thing that y'all want to see would be Lighthouse. So this is a React app. We know that. But when you come into your developer tools and you go to the Lighthouse tab in particular, what you can do is set the different categories you want it to check for, and determine if your app is up to standards. So desktop isn't as hard to develop for, so I always run my reports for mobile. And as you can see in the background, Lighthouse does this cool thing. It goes ahead and puts it in a mobile view, and it runs all of these different performance tests to see, well, is your app running fast enough? Is it gonna work well for people with a slow internet connection? Is it accessible? Things like that. So as you can see, this app is pretty bad on performance, but the cool thing about Lighthouse is that down here they give you a lot of suggestions on what you can do to improve your app. So this first contentful paint, basically, how fast can you get your initial page load? Nine seconds is way too long. So I'll have to dig in and see what exactly is the problem. I'm guessing it has something to do with this graph, just a guess. But as you can see, they give you screenshots, they give you some different options, and this right here Minify JavaScript, that's why we run on a production build, but this is just a demo, so gotta show you what I can show you. But again, Lighthouse is a great tool, it gives you all of these tips and ideas of what you can do to make your app more performant. And so now that you've seen Lighthouse, if you're not familiar with the Profiler tool, but you have heard of the React Perf tool, this basically replaced that Perf tool. So there used to be some kind of React add-on that you could put in your code, and surround the particular component that you wanted to figure out how long it was taking to load with, and it would give you this whole report on, from the minute it starts rendering to the second it stops. But now that just happens in the browser, which is pretty awesome. So going back to our page, I'm clearing out everything. We'll go over here to this Profiler tab, which is really cool, but basically you can start profiling and refresh the page. It didn't profile for me.

4. Profiling Components for Performance

Short description:

This gives you a view of every single component on the page and how long it takes to load. It's a fast way to identify problem areas and find improvements.

Okay. So now it's refreshed and we are waiting on it to finish profiling whatever it's profiling. So I think I'll go ahead and stop it. But this gives you a view of every single component on the page and how long it takes to load. I'll try to make that bigger so you can see. But overall, you can see that the page took almost, what is that, almost half a second before I hit stop. But this is just a breakdown of how every single component on that page down to the router, how long it takes for those different elements to load. So clearly the chart is where the problem is because it's taking the most time out of all of these components. But this is one of the fast ways you can figure out, hey, where should I be looking for those kinds of improvements? This just gives you a really broad overview so that you can see those particular problem areas really fast, really easily.

5. Analyzing API Calls with the Network Tab

Short description:

The Network tab in the Chrome DevTools is essential for front-end engineers working with API calls. It allows you to monitor the data being sent and received, ensuring that the backend hasn't changed any parameter names. API requests can be a potential problem area, especially if a component makes multiple requests. The time it takes for these requests to complete can significantly impact your app's performance. By analyzing the Network tab, you can identify any bottlenecks and verify that the expected data is being retrieved. Additionally, you may uncover opportunities for performance improvements on the backend.

And so back to here, the Network tab. This is every front end engineer's best friend when we're working with those API calls, trying to figure out what data we're working with and making sure that the backend didn't change any parameter names. So when you're making those API requests, sometimes that is where your problem area is because one component could potentially make many, many API requests. And depending on how long those requests take, like how much data they're returning or how much data you have to send to them, that could be a huge bottleneck for your app because your page won't finish rendering until you have that data back. Or maybe you'll just get an error. But the main thing is that you want to see any calls you made. Like in my case, one of the backend APIs was this get all items. And you see how long it took if we just go back here. So this only took 24 milliseconds. Probably not a big problem. But it also gives you a chance to make sure that you're getting the data you're looking for, that if there are any performance improvements that can be made on the backend side, you might find them here.

6. Optimizing App Performance

Short description:

There are other Chrome DevTools that allow you to analyze your components and understand how they are loaded onto the page. To keep your app performant, consider virtualizing lists, implementing lazy loading for on-screen components, caching data, minimizing JavaScript, CSS, and images, handling rendering-related errors, and chunking bundles when using lazy loading with React and Webpack.

Okay, so we got to the network tab. And then, of course, there are other Chrome DevTools. So maybe one of the problems you have is that there are just way too many nested components. So you can come over here and look at your components and just see like, oh, fullscreen. Okay, you can just see like how many components deep everything is, the props and everything that they have on them. And it gives you a better idea of how things are actually being loaded onto your page.

All right, now that you know all about testing, let's talk about how you can keep your app performant. So remember, we were talking about those API requests that return a lot of data? Go ahead and try to virtualize those lists. So if you can do any type of pagination, or what is that the infinite scroll thing, if you can do that instead of loading a thousand items onto a page at once, that will definitely help your performance a lot. And then lazy loading. If you have, let's say, just a bunch of on-screen components, but they don't necessarily need to be available immediately, you can do something kind of like, where is that? This, maybe it's on a different one. OK, maybe it's here. Yes, it is here. So, pretty much, you can lazy load a component that you import. And basically, this makes sure that the page continues rendering until you have that component available. So, in its place, will be some kind of placeholder until that component's ready. And that saves you from your page hanging up on loading time. And, of course, you can cache your data. That's always fun and React comes with that service worker just already there. If you need something more advanced, definitely look into Google's Workbox. It has a lot of great ways to implement caching that won't frustrate you to tears. And, of course, make sure you're minimizing everything. All of your JavaScript, CSS images, whatever it is, make sure that it is minimized in your production build. Especially if you're using Webpack because it can do some weird config things. Handle your errors. We know sometimes you don't necessarily need to explicitly handle them. But make sure that you are handling the ones that have to do with rendering in particular. Because the last thing you want is an OnPage component that is infinitely loading and it just stops the rest of the processes from running. And last thing, make sure that you are chunking your bundles. So when you implement this lazy loading that I mentioned earlier, React has some package that if you're using Webpack, it'll go ahead and chunk every individual file.

7. Cleaning Up an Existing App

Short description:

To clean up an existing app, you can use code splitting to lazy load components and create individual bundles. Tree-shaking helps eliminate dead code, reducing bundle size. Check for unused packages and only import necessary parts. Unused libraries increase load time, so remove them. Unused packages should be removed entirely.

So you end up with a bunch of tiny little bundles instead of that ginormous one that takes three seconds to load. So fun part, how do you clean up an existing app? The first thing you can do is code splitting. And code splitting is basically what we just mentioned, where instead of having that giant bundle at the end, you lazy load in all of your components and it makes individual bundles for each of those files. And tree-shaking, which is a funny term to me, but all it means is that you go through your code and make sure there isn't any dead code. If there's any code or any lines in your code that aren't being used, just delete them. All they're doing is taking up space and adding on to your bundle size, which makes it a little bit longer to load a page than it needs to because you're not using those values. And the fun one, always check for those unused packages because if you don't need the entire Lodash library, you can probably get away with just importing the parts that you need. Unused libraries are a huge problem for performance just because they make that bundle size so large that the upfront load time, it's just longer than it has to be. So if you have any unused packages, if you have any packages that you could just take certain methods or parameters from, try to do that. But definitely, if you're not using a package, get rid of it.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Next.js for React.js Developers
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js for React.js Developers
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.