useCallback & useMemo

基本上這兩個 hook 主要的作用都是幫助效能優化(減少非必要的渲染)
頁面上有多個 component 時，會希望僅就資料變化或必要的部分來重新渲染出 component，而不是每個 component 都重新渲染，當 component 的 props/state 沒有被變更，就不讓該 component 被重新渲染

差別在於 useCallback 回傳一個被記憶的 function (memoized version of callback function)
而 useMemo 回傳一個被記憶的值(memoized value)
只有當依賴的項目(dependencies)被變更時才被變更

useCallback / useMemo 用法

跟其他 react hook 一樣，使用前要先 import

import {useCallback , useMemo} from 'react';

useCallback

const someFn = useCallback(()=>{
    doSomething();
} , [dependencies])

useMemo

const someFn = useMemo(()=>{
    return someValue;
} , [dependencies])

或

import React from 'react';
...
export default React.memo(CompName);

但無腦用 useCallback / useMemo 反而會造成反效果

並不是每個 component 使用 useCallback / useMemo 就可以改善效能，無腦使用反而會造成更消耗效能

• 當該 function 相當耗費效能

參考資料

useCallback
https://www.youtube.com/watch?v=IL82CzlaCys
useMemo
https://www.youtube.com/watch?v=THL1OPn72vo
https://www.w3schools.com/react/react_usememo.asp
https://mebtte.com/use_callback_misunderstanding