UseCallback and useMemo

useCallBack

Parameters:

An inline callback function
Dependency array

The return value:

Memoized version of the callback function

The callback function is regenerated only when the dependency changes.

Example Usage scenario:

If you need to pass a function as props to a sub-component, and the sub-component does some optimization internally, such as rerendering when the props changes. You can then cache this function using useCallback and pass in a Memoized version of the function. When the parent component is updated, the memoized version of the function is unchanged, so are the functions passed to the child component, and the child component is not re-rendered.

function SubCounter({ onClick, data }) {
  return <button onClick={onClick}>{data}</button>;
}

const MemoSubCounter = React.memo(SubCounter);
let oldData, oldAddClick;

function Counter1() {
  console.log("Counter1 render");
  const [name, setName] = useState("Counter");
  const [number, setNumber] = useState(0);
  
  // It is important that there is no dependency array behind it, otherwise it will still be re-rendered
  const addClick = useCallback(() = > {
    setNumber(number + 1);
  }, [number]);
  console.log("addClick===oldAddClick ", addClick === oldAddClick);
  oldAddClick = addClick;

  return (
    <div>
      <p>Counter1</p>
      <input
        type="text"
        value={name}
        onChange={(e)= > setName(e.target.value)}
      />
      <MemoSubCounter data={number} onClick={addClick} />
    </div>
  );
}
Copy the code

In the code above, the React. Memo is used to optimize the SubCounter component to generate a new component with the property that it will not re-render if the props received remain the same.

In the code above, you pass an addClick function to the child component, which is a Memoized version, that is, every time the parent component is updated, the function remains the same unless its dependency number changes. So when we change the name property with setName in the input to trigger a parent update, the child receives the addClick function unchanged and the child is no longer rendered.

useMemo

const memoizedValue = useMemo(() = > computeExpensiveValue(a, b), [a, b]);
Copy the code

Parameters:

An inline callback function
Dependency array

The return value:

Memoized version of the return value of the inline callback function

As with useCallback, it can be used when you need to pass some variable to a child component if the variable has not changed and the child component does not want to update it

UseMemo generates memoized versions of variables that are passed to the child components.

function Counter2() {
  console.log("Counter2 render");
  const [name, setName] = useState("Counter");
  const [number, setNumber] = useState(0);
  // When the parent component is updated, the variables and functions are recreated each time, so the attributes received by the child component are considered new each time
  // So the child components are also updated, and useMemo can be used
  // It is important that there is no dependency array behind it, otherwise it will still be re-rendered
  
  // If data is generated this way, the data passed to the child component will be different each time
  const data = { number } 
  // If the data is generated this way, the data passed to the child component will be the same each time, unless the number changes
  const data = useMemo(() = > ({ number }), [number]);
  console.log("data===oldData ", data === oldData);
  oldData = data;

  // It is important that there is no dependency array behind it, otherwise it will still be re-rendered
  const addClick = useCallback(() = > {
    setNumber(number + 1);
  }, [number]);
  console.log("addClick===oldAddClick ", addClick === oldAddClick);
  oldAddClick = addClick;

  return (
    <div>
      <p>Counter2</p>
      <input
        type="text"
        value={name}
        onChange={(e)= > setName(e.target.value)}
      />
      <MemoSubCounter data={number} onClick={addClick} />
    </div>
  );
}
Copy the code

IO /s/learn-hoo…

UseCallback and useMemo