都講useMemo 了，不講一下 useCallback 嗎，還是其實我已經想不到主題了。

基礎介紹

useCallback 回傳一個 memoized的 callback function。 其實跟 useMemo 大同小異。useCallback其實就等於回傳一個 function 的 useMemo。

useCallback 的目的是避免在 component 內部宣告的 function，因為隨著每次 render 不斷重新被宣告跟建立。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

相同 React.memo 功能

可以利用 useCallback可以達到相同 React.memo 功能，且更加優化，useCallback 可以記住 function 的記憶體位置，而 React.memo 是 shallow compare 所以 React.memo 會因為"物件型別記憶體位置不同但值相同"而重新渲染。

// 方法一
const Title = useCallback(
    ({ title = ''}) => (
      <p>
        {title}
        <span>預留位置</span>
      </p>
    ),
    []
  );

// 方法二
const Title = useCallback(
    () => (
      <p>
        {title}
        <span>預留位置</span>
      </p>
    ),
    [title]
  );
// 引用方式
<Title title={'title'} />

這邊範例是用來表示 useCallback 可以當一個接收 參數的函示，當參數有所改變時， function 會被重新呼叫，或是利用 dependency 來觸發。

與 useMemo 比較

而這邊範例則是用來表示，useCallback 如果有 return value 時，基本上功能與 useMemo 大同小異

// return value
const getType = useCallback(() => {
    if (count % 2 === 0) {
      return "偶數";
    } else {
      return "奇數";
    }
  }, [count]);

// 引用方式
getType()

const getMemoType = useMemo(() => {
    if (count % 2 === 0) {
      return "偶數";
    } else {
      return "奇數";
    }
  }, [count]);

提供 codesandbox 歡迎一同服用～