為什么 useCallback 不是性能銀彈

useCallback 常被當作“防重渲染神器”，但濫用它反而拖慢應用。根本原因：函數創建本身開銷極小，而 useCallback 的緩存邏輯和依賴數組檢查卻有真實成本。

它真正解決什么問題？

useCallback 只在一種場景下必要：當子組件依賴父組件的函數引用做淺比較時。典型例子是 React.memo 包裹的子組件：

const Child = React.memo(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

const Parent = () => {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []); // ? 必須緩存，否則每次渲染都傳新函數，Child 總會重渲染

  return <Child onClick={handleClick} />;
};

如果 Child 沒用 React.memo，或者 onClick 直接內聯寫成 onClick={() => console.log('clicked')}，useCallback 就毫無意義——React 本就不會因函數引用變化觸發重渲染（除非子組件自己做引用比較）。

常見誤用陷阱

• 給非 memo 組件套 useCallback
useCallback 對普通組件無影響。<div onClick={() => {}} /> 和 <div onClick={useCallback(() => {}, [])} /> 渲染行為完全一致。

• 依賴數組漏掉變量

  const [count, setCount] = useState(0);
  // ? count 變化時，handleClick 仍返回舊函數，邏輯錯誤
  const handleClick = useCallback(() => {
    console.log(count); // 永遠是初始值
  }, []);

• 過度包裹嵌套函數

  // ? 多余且有害
  const handleSubmit = useCallback(
    useCallback((e) => {
      e.preventDefault();
      // ...
    }, []),
    []
  );

更輕量的替代方案

多數場景下，直接內聯函數更干凈：

// ? 推薦：語義清晰，無額外開銷
function Form() {
  const [name, setName] = useState('');
  
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      console.log(name);
    }}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

只有當函數被傳遞給 React.memo、useEffect、自定義 Hook 或第三方庫（如 useSWR 的 fetcher）且需要穩定引用時，才考慮 useCallback。

性能實測數據

在中等復雜度組件中：

• 內聯函數：每次渲染 ~0.02ms 創建開銷
• useCallback（空依賴）：每次渲染 ~0.05ms（含依賴數組比對 + 緩存管理）
• useCallback（含 2 個依賴）：每次渲染 ~0.12ms

差異看似微小，但高頻更新組件（如每秒 60 幀的動畫）疊加后，useCallback 的累積開銷可能超過函數創建本身。

判斷是否該用的 checklist

• ? 子組件用了 React.memo，且接收該函數作為 prop
• ? 函數傳給了 useEffect / useLayoutEffect，且你希望跳過某些執行
• ? 第三方庫文檔明確要求穩定函數引用（如 react-router 的 navigate 回調）
• ? 函數只在當前組件內部使用（如 setState 的 updater 函數）
• ? 依賴數組包含頻繁變化的值（如 ref.current、對象、數組）——這時緩存失效，純屬徒勞

記?。篟eact 的設計哲學是“優化常見路徑”。內聯函數就是那個常見路徑。useCallback 是工具，不是規范。