React apps are fast by default, however, when they become slow, we can identify performance bottlenecks and apply optimizations to make our apps faster.
Once we’ve identified a performance bottleneck, we can begin applying performance optimizations. React provides us with tools that fall into two categories: memoization and code splitting.
To memoize data, we can utilize
useMemo()memoizes a value.
React.memo()memoizes a component.
useCallback()memoizes a function.
To split our code into chunks, we can use
import()can split a module into a chunk.
<Suspense />can split a component into its own chunk, while also providing a loading state and allowing the rest of our app to load first.
Measuring, applying performance optimizations, and measuring again is the best way to make sure our apps feel as fast as possible for our users. With the tools we learned throughout this lesson, we’re ready to make our apps fast, which is a great experience for our users.
Think of a time when a React app or website felt slow.
How would you confirm a hypothesis of the performance bottleneck in the app?
Assuming that your hypothesis was the performance bottleneck, what performance technique would you use to address the problem?