React.memo

1, What is react.Memo ()?

React 16.6.0 has two major new features that help improve rendering performance:

• React.memo()
• React.lazy(): Use React Suspense for code splitting and lazy loading

React.memo()

React.memo() is similar to PureComponent in that it controls when components are rendered. We all know that the current component and its descendants will be re-rendered when the component props and state are changed, but some components (plain text components) do not need to be re-rendered, and this re-rendering of unwanted components affects the overall rendering performance.

Controlling when components render can help solve this problem. React optimizes component performance in several ways:

• Component lazy loading (React. Lazy (…)) And)
• PureComponent
• shouldComponentUpdate(…) {… } Life cycle functions
• React.memo

Unlike PureComponent, react.Memo () is a higher-order component used for function components. The component is re-rendered by shallow comparisons of the props before and after. If the props are inconsistent, the component is re-rendered.

function memo<T extends ComponentType<any\>\>( Component: T, propsAreEqual? : (prevProps: Readonly<ComponentProps<T\>\>, nextProps: Readonly<ComponentProps<T\>\>) \=\> boolean ): MemoExoticComponent<T\>;Copy the code

The second parameter of the memo function receives a function that compares the props before and after.

2. Compare the memo before and after use

Here’s an example of how to use the react. memo when not using the react. memo:

// Parent.tsx import React, { useState } from 'react'; import Child from '.. /Child'; const Parent = () => { const \[count, setCount\] = useState(0); console.log('parent render update') return ( <React.Fragment\> <div\>{count}</div\> <button onClick\={() => setCount(count + 1)}>++++</button\> <Child msg\='test'/> </React.Fragment\> ) } export default Parent; // Child.tsx import React from 'react'; const Child = (props) => { console.log('child render update'); return <div\>{props.msg}</div\> } export default Child;Copy the code

When the parent component changes state, the Child component is also rerendered

When using react. memo

// Child.tsx
import React from 'react';

const Child = (props) => {
 console.log('child render update');
 return <div\>{props.msg}</div\>
}

export default React.memo(Child);
Copy the code

Console print results

The Child component was not re-rendered because the props before and after were not changed.

3. Control rendering in class components

3.1, shouldComponentUpdate

To avoid useless rendering of the React component, we can implement our own shouldComponentUpdate lifecycle function.

When React wants to render a component, it will call the component’s shouldComponentUpdate function, which tells it if it really wants to render the component.

You can control this by rewriting the Child component

import React from 'react';

class Child extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
         if (this.props.msg === nextProps.msg) {
             return false;
         }
         return true;
     }
     render() {
         return <div>test</div>
     }
}

export default Child;
Copy the code

3.2, PureComponent

Class components inherit PureComponent to control rendering if the listening props are changed (shallow comparison)

import React from 'react';

class Child extends React.PureComponent {
 render() {
     return <div>test</div>
 }
}

export default Child;
Copy the code

4, summarize

The React team has been working on performance improvements with a lot of new apis and hooks. We should learn about them and do our best!

reference

Web Performance optimization: Use React.Memo () to improve React component performance

Use react.Memo () to optimize the performance of function components

# Why use react.Memo in function components? – Clock in seven days

React PureComponent Usage Guide