Making Your React Apps Perform At Scale

Rate this content
Bookmark

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.