【React 學習筆記 EP.24】useCallback

什麼是 useCallback？

useCallback 是 React 提供的一個 Hook，用來快取函式參考，讓它在依賴沒有改變時，於重新渲染後仍然回傳同一個函式參考。

useCallback 概念

1. 記憶化：useCallback 會把你傳入的函式快取起來，下次渲染時如果依賴沒變，就直接回傳同一個函式參考，而不是回傳新的函式參考。
2. 依賴陣列：你需要告訴 React「什麼東西改變時，才需要更新這個函式」。只有陣列裡的值發生變化，函式參考才會更新。
3. 參考穩定性：useCallback 可以讓函式的參考在依賴不變時保持穩定，這對把函式傳給子元件，或當作 useEffect 的依賴時特別重要。

useCallback 語法

1. fn：你想要記住的函式本體，React 會回傳這個函式本身，不會主動執行它。
2. [deps]：依賴陣列；裡面放這個函式所用到的外部變數。當任一項改變時，React 才會更新函式參考。
3. memoizedFn：回傳值，是被快取過的函式參考，可直接當一般函式呼叫。

// 語法範例：const memoizedFn = useCallback(fn, [deps]);

import { useState, useCallback } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 建立一個計數狀態，初始值 0

  // 用 useCallback 記住這個函式
  // 因為這裡使用 functional updater，不直接讀取 count，所以依賴陣列可以是空陣列
  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1); // 把 count 加 1
  }, []);

  // 點按鈕觸發記憶化後的函式
  return (
    <button onClick={handleClick}>點擊次數：{count}</button>
  );
}

export default Counter;