Use React.lazy to do code-splitting with React Suspense

Use React.memo to avoid unnecessary re-renders in React functional components

Add state to functional React component with useState hook without introducing a class

Use React useEffect hook to see how many times component mounts and unmounts

Learn React lazy, memo, useState and useEffect in 7 minutes

Class components can bail out from rendering when their input props are the same using `PureComponent` or `shouldComponentUpdate`. Since React 16.6 you can do the same with function components by wrapping them in [React.memo](https://reactjs.org/docs/react-api.html#reactmemo).

Instructor: [00:00] We have a very simple React application. It consists of two elements. The first one is a div displaying the current count. By default, it's set to zero. We also have a button, which allows us to increase the counter when we click it. Let's say that we would like to add a header, which is going to be a stateless functional component.

[00:19] I'm going to set a text prop that is going to return a div displaying the text provided in this prop. We are also going to add a console.log to check how many times this component has been rendered. Save that, and use our header over here.

[00:35] I'm going to put a header, and also provide a text prop. set to header. Let me format that, and now, let's take a look inside of the dev tools. You can see by default, this component has been rendered once, but if I click the button, even though the text header hasn't changed at all, we are still rendering this component over and over again.

[00:59] We can fix this. To fix this, import a memo higher order component from React. Next, wrap the stateless functional component inside of the memo component. The result is as follows. Now, if I click the button, there will be no additional renders.

[01:16] The reason it works because React memo shallowly compares the probes passed into the stateless functional component. The props haven't changed. For instance, in this case, when the text is always set to header, it will not render the component again, even though the state of the parent component has changed.

Course

Learn React lazy, memo, useState and useEffect in 7 minutes

Use React.memo to avoid unnecessary re-renders in React functional components

Share this video with your friends