Identify performance bottlenecks with the React profiler developer tools. Then, learn how to apply various memoization and code splitting techniques to make your apps fast.

React Optimization

When we load a component like `<DrivingDirectionsMap>` with `React.lazy()`, the component will download as its own chunk separately from the main bundle. However, React won't be able to _render_ the `<DrivingDirectionsMap>` component separately from our main bundle. Instead, React will wait until all chunks are downloaded, after which it will display our app.

To tell React to load the rest of our app first, then insert our lazily loaded component, we can use the `<Suspense>` component from React.

The `<Suspense>` component instructs React to load every part of our app except the components imported with `React.lazy()`. While those components download, `<Suspense>` will show a loading state. Once the lazily loaded component is ready, `<Suspense>` will insert the component to our app.

Here's what React's `<Suspense>` syntax looks like:

```jsx
import React, { Suspense } from 'react';

// ...

const DrivingDirectionsMap = React.lazy(() => import('./DrivingDirections)); 

// ...

return (
  <Suspense fallback={<p>Loading...</p>}>
    <DrivingDirectionsMap />
  </Suspense>
)
```

In the example above, the `<Suspense>` component has the `<DrivingDirectionsMap>` component, imported with `React.lazy()`, as its child. 

`<Suspense>` also takes one prop named `fallback`, which is a React component used to display a loading state while its children load. In the example, while `<DrivingDirectionsMap>` is downloading, the UI will display a paragraph with the text "Loading..." until the `<DrivingDirectionsMap>` component s ready to be displayed.

When importing components with `React.lazy()`, we should always wrap the lazily loaded component in React's `<Suspense>` component, so that the lazily loaded component may render into our app after the rest of our app. This will allow our apps to load quickly on the first render, then fill in with components that are expensive to download.


Suspense

The `useMemo()` hook memoizes values returned by expensive functions. But what if we have an expensive React component that is re-rendered even though its props do not change? 

When React detects a change in a parent component, it will re-render all of its child components to make sure the app is up to date. This may create a performance issue when a child component renders something expensive, like thousands of elements or an iframe.

To solve this problem, React provides a **higher-order component** named `React.memo()`. A higher-order component is a component that takes another component as an argument so that it can add functionality to it. In this case, `React.memo()` will only allow the component passed to it to re-render if its props have changed. Here's what the syntax of `React.memo()` looks like:

```js
import React from 'react';

const MemoizedListComponent = React.memo((props) => {
  const { longList } = props;
  return longList.map(item => <li>{item}</li>);
});
```
In the code above, we pass a function component to `React.memo()` as its first argument. `React.memo()` will compare the `props` of the function component before and after each render phase and only re-render it if the values of those `props` have changed. Then, we assign the result of `React.memo()` to `MemoizedListComponent`, which we can use in other components.

Note that React will only shallowly compare the props of the memoized component before and after each render. To ensure that complex values such as objects and arrays are deeply compared, we can provide a comparison function as the second argument to `React.memo()`.

```js
const areDeeplyEqual = (previousProps, nextProps) => {
  return JSON.stringify(previousProps) === JSON.stringify(nextProps)
};

const MemoizedComponent = React.memo(ExpensiveComponent, areDeeplyEqual);
```

By applying `React.memo()`, the function component will not re-render if its parent changes and its props stay the same. Depending on the rendering performance of the child component, this can result in a substantial performance benefit.


Memoizing Components

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.


Measure a performance bottleneck, apply a technique, then measure again.

Review

As our apps grow, we may start to create React components that are filled with complex logic and functionality, like a component to present a map with driving directions. This component would be large. Instead of including a large component in our app's main bundle, we can separate it into a chunk, which will allow users to download it after our app's main bundle.

Normally, we'd import a React component like this:

```js
import DrivingDirectionsMap from './DrivingDirectionsMap';
```

Importing a component like this will include it in our app's main bundle.

To split the `DrivingDirectionsMap` component into its own chunk, we can use `React.lazy()`, which has the following syntax:

```js
const DrivingDirectionsMap = React.lazy(() => import('./DrivingDirections)); 
```

`React.lazy()` accepts a callback function as an argument. Inside the callback, we use the `import()` function, which we discussed in the previous exercise. Then, `React.lazy()` will return the `<DrivingDirectionsMap>` component. When the user loads the page, they'll download this component as its own chunk, which we'll be able to see in the Developer Tools Network tab.

With `React.lazy()`, we can make sure that components that are large and non-essential to the first rendering of our app are downloaded separately from our app's main bundle.


Code Splitting Components

A webpage that loads the top half first, then the bottom half second.

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: 
1. **Memoizing** values, components, and functions
2. 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](https://www.codecademy.com/content-items/2ccebc8eb72b4b2d855f507e479d7101?bypass_cache=true) 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 `React.memo()`, `useMemo()`, and `useCallback()`
* Code splitting with `import()`, `React.lazy()`, and `<Suspense />`.


Introduction

There's another category of techniques to make our apps faster, which involves only sending the necessary parts of our React code when the user needs them. This is called **code splitting**.

When we build a React app, all of the code in our app is gathered into one file called a **bundle**, which users download when they request our app. That means that users download all of our application code when they load our app for the first time. As our apps grow in complexity, so will our app's bundle size. This will make it take longer for a user to download and load our app, especially if they are on a slow internet connection.

One way to make our app faster is to split out large modules from our app's bundle into their own **chunks**. A chunk is a smaller JavaScript file that will be sent to a user separate from the bundle. A chunk can be loaded after the bundle loads, leading to a performance improvement.

Normally, we would import a module, like [`'moment'`](https://momentjs.com/), into our app like this:

```js
import moment from 'moment';

// ...

function onClick() {
  setDate(moment(new Date()).format('MM/D/YYYY'))
}
```

When we look in the Developer Tools Network tab, we can see that all of our app's code was bundled into our app's `bundle.js`. The `bundle.js` file below includes the `moment` library inside of it:

![bundle.js network request](https://static-assets.codecademy.com/Courses/react/performance/excercise-5-image-1.png)

Instead, we want to only send the contents of the `moment` module when the user interacts with a feature that requires `moment`. To do this, we can use the `import()` syntax to load it as its own chunk:

```js
async function onClick() {
  const moment = await import('moment');
  setDate(moment.default(new Date()).format('MM/D/YYYY'))
}
```

The `import()` syntax is based on JavaScript Promises, so we use `await` to wait for the Promise to resolve and mark the function as `async`. Also, we have to add `.default` to `moment` after importing it with `import()` to make sure we select the `default` export from `moment`.

Now when we look in the Network tab and we see that the `moment` module is now its own chunk, downloaded separately from the bundle:

![moment network request](https://static-assets.codecademy.com/Courses/react/performance/excercise-5-image-2.png)

The last chunk listed in the image above ("vendors-node_modules_moment_moment.chunk.js") is the `moment` module.

Code Splitting Modules

React provides us with one more memoization function: `useCallback()`. Again, React will recreate all code defined inside a component when it is re-rendered, including functions. `useCallback()` allows us to memoize a function, preventing React from recreating that function when the component re-renders.

This hook is particularly important when passing functions as props to components memoized with `React.memo()`. Since `React.memo()` compares props between renders, it checks if each prop is the same before and after each render. The problem is that in JavaScript, two identical functions will not equal each other since they are stored in the language as two separate references. Here's an example:

```js
const exampleA = () => { console.log('example') }
const exampleB = () => { console.log('example') }

exampleA === exampleB // false
```

The code sample above will return `false`, even though the `exampleA` and `exampleB` are functionally equivalent.

Consider a parent component that creates a function and passes it as a prop to a memoized child component. If the parent component re-renders, it will recreate the function and pass it along to the child. Despite being functionally equivalent, the memoized child component will not be able to see that the old function and the new function are equivalent and will have no choice but to re-render unnecessarily.

To solve this, we can use the `useCallback()` hook, which accepts two arguments. The first argument is the function we want to memoize and the second is a list of dependencies. The `useCallback()` hook will only recreate the function if its list of dependencies changes. Similar to `useEffect()`, if an empty dependency array is passed to `useCallback()`, the function will only be created once after the first render.

Here's an example to demonstrate its syntax:

```js
import { useState, useCallback } from 'react';
import MemoizedCounter from './Counter.js';

const CounterContainer = () => {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((count) => count + 1), []);

  return <MemoizedCounter onClick={increment} />
}
```

In this example, React will only recreate the `increment()` function when its list of dependencies change. This is important, because if `<MemoizedCounter>` is wrapped with `React.memo()`, it will compare the `onClick` prop before and after each render to see if `<MemoizedCounter />` should be re-rendered. Since `useCallback()` will persist the `increment()` function on between render phases, `<MemoizedCounter />` will only render on mount.


Memoizing Functions

When React loads a component, it not only renders the JSX code but also evaluates all of the code and functions inside the component. Some components require functions that take a long time to execute, including API calls on a slow network or large database queries. If this occurs every time the component is rendered, and if the component re-renders frequently, the overall performance of the application will be compromised.

Often, the data returned by calls to APIs don't change between component re-renders. It would be nice if we could instruct React to only call these expensive functions when new data is needed, and have it return a cached result when the data is the same. Luckily, React provides a hook that can help us optimize expensive function calls, named `useMemo()`.

`useMemo()` utilizes an optimization technique called memoization. This technique caches the result of a function call and only calls the function again when its dependencies change.

React's `useMemo()` hook takes two arguments. The first argument is a function and the second is an array of dependencies. If any of the dependencies change, React will recompute the result of the function. Its syntax looks like this:

```js
import { useMemo } from 'react';

function DatabaseQuerier({ query }) {

  const queryResult = useMemo(() => {
    return  expensiveDatabaseQuery(query)
  }, [query]);
  // ...
}
```

In this example, the `DatabaseQuerier` component uses the time consuming `expensiveDatabaseQuery()` function. However, thanks to `useMemo()`, the `queryResult` returned will only be recomputed if the `query` dependency changes. 

There are some notable behaviors of `useMemo()`:
The function passed to `useMemo()` will be called when the component mounts, so it will always be called at least once.
The dependency list works just like `useEffect()`'s dependency list: If the list is empty, then it will only run on the first rendering of the component. We often want to pass in a dependency list that matches the arguments of the expensive function executed within the `useMemo()` callback. This ensures that any changes to the input of the function will give us an updated output.
The dependency list is not passed as arguments to the function, but in most cases, the dependency list should be the same as the arguments passed to the function.

> Note: The coding exercises in this lesson will be completed off-platform. If you have not done so yet, check out our article on [Setting up Visual Studio Code](https://www.codecademy.com/article/visual-studio-code) before getting started.