React Hooks and Suspense
Prevent Unnecessary Component Rerenders with React memo
You only want to re-render components when the data for that component has changed. Often times you'll find that multiple instances of a component will re-render when the props change for one of them.
With React.memo, you can now pass a stateless functional component to it and it will ensure that it does not rerender unless the props given to the component changes. In this lesson, you'll learn how to implement this with your stateless functional components.
NOTE: This does not work for Class based React Components, use PureComponent or shouldComponentUpdate.
Instructor: [00:00] Here we have a simple App component that has a form with a label for first name, an input. Then we have this Upper component that's simply rendering the children and calling toUppercase on it and also rendering a button that will keep track of how many times it's clicked.
[00:16] We have one for the first name. We also have one for the last name. When we render, we're going to console.log here. If I pop open my developer tools, I'm going to see we get rendering. We're also logging out the children prop.
[00:29] Then if we type something in here, like Tom, and then in here, Riddle, we're going to see a console.log for every time these Upper components are rendered. We have an Upper for first and an Upper for last. We'll get a console.log for each one of those.
[00:42] Let's take a look. First, we get that two rendering for rendering both of those. Then we get a rendering T and then a rendering nothing. That's for this last name.
[00:51] Then we get a rendering O. When we type the O, we get nothing rendered here for the last name.
[00:56] We're rendering the last name component over and over again, but nothing is changing about that component. Its props aren't changing. What is returned is not changing.
[01:05] This is a bit of a contrived example, but if this Upper function were doing some sort of expensive computation or it was rendering a very large tree, then that render is an unnecessary re-render and could lead to a performance bottleneck.
[01:17] We're OK with the state that's inside of this Upper component. If I go ahead and -- we'll clear that out -- then I click on that button to increment the count, we're only going to see rendering Tom. We're not going to see rendering Riddle unless we set the state there.
[01:30] That's because when we set the count here, React is simply going to re-render this component by itself. That's OK, but how do we make sure that the Upper component itself is not going to re-render unless the last name changes here or the first name changes here?
[01:44] What we're going to do is, I'm going to make a variable called Upper. We'll assign that to React.memo of this function. Then we'll save that. We'll get a refresh.
[01:55] We get both of those rendering there. Then we say, "Tom," and then "Riddle." You'll see we're only rendering the Upper component when the props are actually changing.
[02:04] This continues to work with our state. It's only re-rendering Tom here. It's only re-rendering Riddle here, so we're all set with React.memo.
[02:12] Now, re-renders of our App will not re-render the Upper component unless the props we provide to the Upper component are changed. To do this, we simply created a variable with the same name as our function component and assigned it to React.memo and passed our function component to React.memo.
[02:29] An important thing to note here is that you cannot use React.memo on class components. For those, you should use shouldComponentUpdate or PureComponent.