Learn the React Hooks series – useMemo

A scenario where the parent component changes its data, without involving child component data changes, and the child component is rendered every time the parent component renders.

1. Learn about the React.PureComponent component

ShouldComponentUpdate said at first the life-cycle function, the function is through the return true or false to control component is rendered, can effectively avoid meaningless or repetitive component rendering, and avoid unnecessary repeated calculation, reduce resource waste, improve performance.

shouldComponentUpdate(nextProps, nextState) {
    if(this.props.value === nextProps.value) {
        return false; // Check whether the value parameter received by props is changed. If no, this parameter is returnedfalse, components do not render}}Copy the code

ShouldComponentUpdate: shouldComponentUpdate: shouldComponentUpdate: shouldComponentUpdate: shouldComponentUpdate: shouldComponentUpdate: shouldComponentUpdate: shouldComponentUpdate: shouldComponentUpdate

The child inherits PureComponent and determines if the passed parameters have changed, preventing the child from rendering if they have not.

PureComponent shortcomings:

• Only a simple comparison algorithm is provided.
• Complex data structures that transmit values,PureComponentThe component does not make a correct judgment.
  
  
• Function components cannot inheritPureComponentComponents.

2, Learn about React. Memo ()

React 16.6.0 React.Memo () is an advanced component.

import React, { memo } from 'react';
const Child = memo(function Child(props) {
    return(
        <h1>{props.value}</h1>
    )
});

export default Child;Copy the code

React.memo() and react.pureComponent:

React.memo() is a function component, and react.pureComponent is a class component.

Same: Shallow comparison is performed on the received props parameters to solve the efficiency problem of the component at runtime and optimize the re-rendering behavior of the component.

3. UseMemo

React 16.8.0 uses useMemo().

React.memo() determines whether a function component’s rendering is repeated.

UseMemo () defines whether a piece of function logic is executed repeatedly.

import React, { memo, useState, useMemo } from "react";
function App() {
    const [value, setValue] = useState(0);
    const increase = useMemo(() => {
        if(value > 2) return value + 1;
    }, [value]);
    return (
        <div>
            <Child value={value} />
            <button
                type="button"
                onClick={() => {
                    setValue(value + 1);
                }}
            >
                value:{value},increase:{increase || 0}
            </button>
        </div>
    );
}
const Child = memo(function Child(props) {
    console.log('Child render')
    return <h1>value:{props.value}</h1>;
});
export default App;Copy the code

UseMemo () relies on value to define the increase argument:

const increase = useMemo(() => {
    if(value > 2) return value + 1;
}, [value]);Copy the code

The initial value of value is 0. When value increases to a value greater than 2, increase begins to be assigned, and increase is always 1 greater than value

Child component Child:

const Child = memo(function Child(props) {
  console.log('Child render')
  return <h1>value:{props.value}</h1>;
})Copy the code

4. Arguments to useMemo()

If you’ve used useEffect(), you probably know what the second argument to useEffect() does. UseMemo () is the same as useEffect().

The first argument to useEffect() is to execute the function, which is…… The second parameter:

• If the second argument is null, the logic will be executed each time the render component is rendered, and the logic will not be reexecuted based on the value of the property passed in, making it pointless to write useMemo().
• If the second argument is an empty array, it is executed only once when rendering the component, and the update of the property value passed in has no effect.
• So the second argument to useMemo(), the array, needs to pass in the dependent argument.

  useMemo(() => {
    // to do somthing...
  }, [value])Copy the code

5. UseMemo () execution time

UseMemo () is required to have a return value, and the return value is directly involved in rendering, so useMemo() is done during rendering.

So, the problem in the opening scene should be solved effectively 🤔