Use React.memo with a Function Component to get PureComponent Behavior

Instructor: [00:00] First, we'll create a new create-react-app with npm init react-app and call it 16.6-memo, and then immediately change directory to the app folder.

[00:13] In order to use react-memo later in this lesson, we'll need to verify that we have at least React version 16.6, and we do. If we didn't, we'd need to update our version.

[00:24] We'll open up our code editor and start a dev server with npm start. On the right, we have a basic app running that comes baked into create-react-app. Let's open up the app.js file and remove most of the render except the logo image.

[00:40] We'll come up near the top and create a new greeting-react function component, destructuring text from the props parameter. Then we'll console.log a message, "I'm in greeting," which we'll take a look at later in our dev tools, and then return a heading with hello, comma, text, and exclamation.

[01:00] Now we can come down and use our greeting component. We'll provide a text prop of some random number that is fixed to four decimal places. Once we save, our app will update on the right, and we'll see hello and a number. If we open up our dev tools, you'll see the console.log that we added in the greeting component.

[01:19] If I refresh the page, it'll come back once every time and we'll see a different random number rendered. Now let's introduce some state into our app-component and add a label with an input checkbox.

[01:32] We'll give text ofAnimating. Then we'll provide some beginning state of isAnimating true and provide a toggle animation method that will update the state, taking the previous state and assigning isAnimation to the opposite value of what it was before.

[01:52] Now we could go and update our input element, and onChange we'll assign the toggle animation method. The checked prop, we'll set that to the isAnimating state value. Then to actually stop the animation, we'll add an image style variable.

[02:07] If the state is animating, we'll assign an empty object. Otherwise, we'll set animation-name to none, which will stop the animation. Then we'll assign image style to the images style prop.

[02:21] If we save our file, the right will refresh and we can uncheck the box. The image will stop animating. We could keep toggling the checkbox to start and stop the animation.

[02:33] You'll notice that we also see multiple console.logs in the dev tools, which makes sense since the value we're providing is a random number. However, what if we came over and replaced that random number with something static like the string react?

[02:49] Now if we save and toggle the checkbox, the value hello react doesn't change, but we keep getting more console.logs in dev tools. If this were a React class, we could extend pure components or implement shouldComponentUpdate to keep the render from executing. Now, as of React 16.6, we could leverage a new, higher-order component called react.memo.

[03:13] To use it, we wrap our current component with react.memo and React does the rest. If we save, the console.log will no longer keep executing as long as the props don't change.

[03:26] By default, memo only does a shallow compare of props, but if you need more control, you could provide a custom comparison function as a second argument.