useCallback介紹

useCallback 可以說是 useMemo 的語法糖，能用 useCallback 實現，都可以用 useMemo，常用語 react 的效能優化。 在 react 中我們經常面臨一個子元件渲染優化的問題，尤其是在向子元件傳遞函式 props 時，每次 render 都會建立新函式，導致子元件不必要的渲染，浪費效能，這個時候，就是useCallback 的用武之地，useCallback 可以保證，無論 render 多少次，我們的函式都是同一個函式，減少了不斷建立的開銷。

const memoCallback = useCallback(callback, array)
 

返回一個memoized 回撥函式。

• callback 是一個函式用於處理邏輯
• array 控制 useCallback 重新執行的陣列，array 改變時才會重新執行useCallback

1. 陣列，每次更新都會重新計算
2. 空陣列，只會計算一次
3. 依賴對應的值，對應的值發生變化重新計算

• useCallback(fn, deps) 相當於 useMemo(() => fn, deps)

useCallback 使用

function App () {
  const [ count, setCount ] = useState(0)
  const add = useCallback(() => count + 1, [count])
  return (
    <div>
      點選次數: { count }
      <br/>
      次數加一: { add() }
      <button onClick={() => { setCount(count + 1)}}>點我</button>
    </div>
    )
}