为什么在这里使用 useMemo 而不是 useCallback？

Question

So as i understand the difference between the two is that useCallback is used if a function or object or array is returned while useMemo when a primitive is returned. But i was looking up debouncing (this is the article: https://dmitripavlutin.com/react-throttle-debounce/ and it said useMemo would be a better solution. With useCallback

import { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';
export function FilterList({ names }) {
  const [query, setQuery] = useState("");
  let filteredNames = names;
  if (query !== "") {
    filteredNames = names.filter((name) => {
      return name.toLowerCase().includes(query.toLowerCase());
    });
  }
  const changeHandler = event => {
    setQuery(event.target.value);
  };
  const debouncedChangeHandler = useCallback(
    debounce(changeHandler, 300)
  , []);
  return (
    <div>
      <input 
        onChange={debouncedChangeHandler} 
        type="text" 
        placeholder="Type a query..."
      />
      {filteredNames.map(name => <div key={name}>{name}</div>)}
    </div>
  );
}

With useMemo

import { useState, useMemo } from 'react';
import debounce from 'lodash.debounce';
export function FilterList({ names }) {
  const [query, setQuery] = useState("");
  let filteredNames = names;
  if (query !== "") {
    filteredNames = names.filter((name) => {
      return name.toLowerCase().includes(query.toLowerCase());
    });
  }
  const changeHandler = (event) => {
    setQuery(event.target.value);
  };
  const debouncedChangeHandler = useMemo(
    () => debounce(changeHandler, 300)
  , []);
  return (
    <div>
      <input
        onChange={debouncedChangeHandler}
        type="text"
        placeholder="Type a query..."
      />
      {filteredNames.map(name => <div key={name}>{name}</div>)}
    </div>
  );
}

And i don't understand. Is debounce returning a primitive value? If not how can we use useMemo? Also how is useMemo better than useCallback here?

Answer 1

First about your quote:

useCallback is used if a function or object or array is returned while useMemo when a primitive is returned

No, this is wrong. useCallback is mainly for memoizing functions. useMemo helps to avoid expensive calculations on every render.

---

Now for the article. That article prefers useMemo for a different reason, that of performance; although I doubt in most such cases the performance difference will be noticeable.

 const debouncedChangeHandler = useCallback(
    debounce(changeHandler, 300)
  , []);

It says:

However... this implementation has a small performance issue: each time the component re-renders, a new instance of the debounced function is created by the debounce(changeHandler, 300) .

It is saying that even though the debouncedChangeHandler remains the same across re renders due to useCallback , the debounce(changeHandler, 300) is still executed on each render.

But with useMemo :

  const debouncedChangeHandler = useMemo(
    () => debounce(changeHandler, 300)
  , []);

it claims:

useMemo(() => debounce(changeHandler, 300), []) memoizes the debounced handler, but also calls debounce() only during initial rendering of the component.

That is the reason why the article prefers useMemo .

---

Run this code:

let T1 = () => console.log('test1');
let T2 = () => console.log('test2');

export default function App() {
  let f = React.useCallback(T1(), []);
  let g = React.useMemo(() => T2(), []);
  let [x, setX] = React.useState(0);
  return (
    <div
      onClick={() => {
        setX(x + 1);
      }}
    >
      <h1>{x}</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

Click div anywhere and see how test2 isn't logged anymore.

Answer 2

  const debouncedChangeHandler = useCallback(
    debounce(changeHandler, 300)
  , []);

in every render:

1. debounce(changeHandler, 300) will run(it is not a function, it is a called function) and resolve into a value(which is a callback)
2. then useCallback will run, check the the dependency to determine whether it should return memoized value or new value, so in your case, it will return memoized value

  const debouncedChangeHandler = useMemo(
    () => debounce(changeHandler, 300)
  , [])

in every render

1. () => debounce(changeHandler, 300) will not run, it is value(callback)
2. then useMemo will run, it will check the dependency to determine whether to run the callback or not, in your case, it will not run the callback

Answer 3

if you want to return a value, use useMemo if you use useMemo, it will cause side effect, which makes code look bad. if you want to return a callback,use useCallback

Answer 4

A great article on differnce between useMemo and useCallback https://medium.com/@jan.hesters/usecallback-vs-usememo-c23ad1dc60