useCallback 与 useMemo 以及何时使用它们

Question

What is the main difference between useCallback and useMemo ? And when to use useCallback of React Hooks?

Answer 1

useMemo(() => (bar) => foo + bar, [foo]);

Equivalent code with useCallback:

useCallback((bar) => foo + bar, [foo]);

Use callback is just a shorthand variation of useMemo to use with functions.

Here is why it exists: When you use useMemo ,the value usually changes when one of its dependencies change. For example:

const fullName = useMemo(() => firstName + lastName, [firstName, lastName]);

If firstName or lastName change, fullName will also change. On the other hand, functions themselves usually don't need to be recomputed, and their dependencies are mostly closure values that may change.

const getFullName = useCallback(() => firstName + lastName, [firstName, lastName]);

Here, when firstName or lastName change, we don't need to have a completely different function with a different body, but we do need to have a new instance of the same function so that it has up to date values in closure (dependencies). So React team just added it for convenience as it is a common use case, and the () => () => syntax is somewhat ugly.

Answer 2

useMemo and useCallback both use something called memoization which you can think of it like the hooks are remembering something.

---

The differences:

useMemo will memoize/remember the value that is returned from the function you pass into it until the dependancies change.

const num = 10
const result = useMemo(() => num + num, [num])
// result is now equal to 20

useCallback will memoize/remember the actual function you pass into it until the dependancies change which gives you something called referential equality .

const num = 10
const result = useCallback(() => num + num, [num])
// result is now equal to () => num + num.
// result === result between renders.

---

Referential equality:

() => {} === () => {} // This is false

const a = () => {}
a === a // This is true

Answer 3

Both of them take a function and an array of dependencies as parameters like 'useEffect'. The function's return value will only be changed if one of the dependencies value changes — otherwise a cached value will be returned.

Note that passing an empty array of dependencies or no array at all will cause the Hook to return a memoized value on every call.

The main difference between the two is that 'useCallback' returns a memoized callback and 'useMemo' returns a memoized value that is the result of the function parameter.

If you have to process a lot of data, 'useMemo' is the perfect Hook as it will do the work once at the first render and then return a cached version on every other render.

'useCallback', however, is used differently. Take for example a parent component that often re-renders. Inside the parent, we have a child component that takes a function-prop. At each re-render, the Child will re-execute its function prop uselessly. However, if you pass 'useCallback' as a prop with a dependency array, it resolves the issue because the function will be executed only when the dependency changes. Every other re-render will then get a cached function.

import React, { useState, useMemo, useCallback } from "react";

const App = () => {
  // We create two states that will keep count of the number of time all hooks are called
  const [callbackCount, setCallbackCount] = useState(0);
  const [memoCount, setMemoCount] = useState(0);

  const memoFunction = () => {
    console.log(memoCount, "memo called");
    // Do something that will take a lot of processing ...
  };

  // Here if we give an empty array of dependencies, the callback function will return the old value of callbackCount
  // because useCallback will return its memoized version
  const callbackFunction = useCallback(() => {
    console.log(callbackCount, "callback called");
    // Do something with callbackCount ...
    return callbackCount;
  }, [callbackCount]);

  // We create the memo hook, when memoCount changes, the function will be executed again
  useMemo(memoFunction, [memoCount]);

  return (
    <>
      {/* This component will receive a function that will change when the dependency value changes */}
      <ChildComponent action={callbackFunction} />

      {/* Change the callback hook dependency to trigger a change in the child */}
      <button onClick={() => setCallbackCount(callbackCount + 1)}>
        Change callback count
      </button>

      {/* After creating useMemo, each change of memoCount will trigger the function passed to the hook,
    otherwise the memoized value will be returned */}
      <button onClick={() => setMemoCount(memoCount + 1)}>
        Change memo count
      </button>
    </>
  );
};

const ChildComponent = ({action}) => {
  const [value, setValue] = useState(0)

  useEffect(() => {
    let val = action()
    setValue(val)
  }, [action]) 

  return(
    <>
    Child : {value}
    </>
  )
}

Now you should be ready to optimise your code with React Hooks. To recap: you should not use 'useCallback' and 'useMemo' for everything. 'useMemo' should be used for big data processing while 'useCallback' is a way to add more dependency to your code to avoid useless rendering.

Answer 4

We can use useCallback to memoize a function, which means that this function only gets re-defined if any of its dependencies in the dependency array change.

useMemo(() => computation(a, b), [a, b]) is the hook that lets us memoize expensive computations. Given the same [a, b] dependencies, once memoized, the hook is going to return the memoized value without invoking computation(a, b).

This article about different React Memoization Methods: React.memo, useMemo, useCallback, what is different between them with practical examples: https://medium.com/geekculture/great-confusion-about-react-memoization-methods-react-memo-usememo-usecallback-a10ebdd3a316

The useMemo is used to memoize values, React.memo is used to wrap React Function components to prevent re-renderings. The useCallback is used to memoize functions.

Answer 5

useMemo helps prevent re-rendering unless dependencies to a function have changed while useCallback helps prevent rerendering unless a function has changed. Ie when a function is to be passed as an argument to another function, useCallback will only allow re-rendering after a different function is passed. Here is a link to a resource that might help explain further

https://btholt.github.io/complete-intro-to-react-v5/hooks-in-depth