Learn

React apps are fast by default, however, when they become slow, we can identify performance bottlenecks and apply optimizations to make our apps faster.

To identify performance bottlenecks, we can use the React profiler to examine which components are rendered and how often. We can also use the Network tab in the Developer tools to inspect the size of the JavaScript bundle we send to users.

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(), React.memo(), and useCallback().

  • useMemo() memoizes a value.
  • React.memo() memoizes a component.
  • useCallback() memoizes a function.

To split our code into chunks, we can use import() or React.lazy() and <Suspense />.

  • import() can split a module into a chunk.
  • React.lazy() and <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.

Instructions

Task 1

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?

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?