People love when their apps are fast and web apps are no exception. However, as applications grow they can start to feel sluggish. In response, we can apply techniques to reduce unnecessary renders and expensive calculations, resulting in the seamless experience our users expect.
React provides many techniques for solving performance issues. In this lesson, we’ll look at two of the most common techniques:
- Memoizing values, components, and functions
- Splitting modules or components into chunks with code splitting
Throughout this lesson, we’ll use the React profiler and the Network tab in the developer tools to measure an app’s performance before and after applying these techniques.
Note: Haven’t watched the video on the React profiler yet? We recommend that you check it out before getting started with this lesson.
In this lesson, we will learn how to optimize our React apps using various techniques, including:
- Memoization with
- Code splitting with
Take a look at the diagram provided, which depicts lazy loading in an art exhibition web app. In this example, we optimize our art exhibition site by loading the top section of our app first since that is what the user will immediately need to see. We can then load the location and map afterward in the background or when the user scrolls to it.
Imagine that we sent the code to render the map and location when the page first loaded. What kinds of negative effects would it have on someone using our site?
If the map and location required extra network requests or ran expensive calculations, then the user would have to download the code to render the map and location and run that code before they saw the top section of the page load. That would make the page feel slow to load.