Charonyu's Profile

useCallback 的主要用途並不僅僅是為了「節省 CPU 計算」，它更多是為了避免不必要的組件重新渲染。

考慮以下情況：

有一個父組件和一個子組件。

父組件每次重新渲染時都會創建一個新的callback function。

這個新的callback function會作為 props 傳遞給子組件。

因為每次callback function都是新的（即使行為相同），React 會認為子組件的 props 已經改變，因此會觸發子組件的重新渲染。這就是不必要的性能開銷

情況1


function Parent() {
  const [count, setCount] = useState(0);

  const onClick = useCallback(() => {
    console.log('click');
  }, []);

  return (
    <>
      <Foo onClick={onClick} />
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>count increment</button>
    </>
  );
}


const Child = memo({ onClick }) => {
  // ...略

  return (
    <>
     // ...
     <button onClick={onClick}>可點擊</button>
    </>
  )
});

如果沒有使用 useCallback，當 Parent 重新渲染時，也會重新渲染 onClick，製作新的 function 傳入 children，這會導致 memo 判斷錯誤而一樣重新渲染。

情況2


const App = () => {
  const [id, setId] = useState(1);
  const [detail, setDetail] = useState("");

  const getDetail = useCallback(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    .then(res => res.json())
    .then(json => {
      setDetail(json); // state updated
    }));
  }, [id]);

  useEffect(() => {
    getDetail();
  }, [getDetail]);

  return (
    <>
      <p>{detail.name}</p>
      <p>Current id: {id}</p>
      <button onClick={() => setId(id + 1)}>id increment</button>
    </>
  );
}

通常，如果您沒有將函數作為依賴項放入，eslint會提示 "React Hook useEffect has a missing dependency"。但是，如果您將函數放進去，又會導致在第一次渲染時製作函數，在函數完成後，由於函數的更改，useEffect再次渲染，導致函數和渲染之間的無限循環。此時，您需要使用useCallback。

useMemo也一樣


const App = ({ param1, param2 }) => {
  const params = useMemo(() => {
    return { param1, param2, param3: 1 };
  }, [param1, param2]);

  useEffect(() => {
    callApi(params);
  }, [params]);
}

參考資料：

ithelp.ithome.com.tw

https://ithelp.ithome.com.tw/articles/10283194

useCallback & useMemo

情況1

情況2

useMemo也一樣