useMemo代替useRef ?！

背景

react-compound-timer 庫的useTimer Hook實現有這麼段代碼：

const timer = useMemo(
    () =>
      new TimerModel({
        initialTime,
        direction,
        timeToUpdate,
        lastUnit,
        checkpoints,
        onChange: (timerValue: TimerValue) =>
          setTimerValues(state => ({ ...state, ...timerValue })),
      }),
    [],
  );

useMemo的依賴是空數組，因此變量timer在組件生命週期裏都不會變化，有點相似實例變量。可是Hooks裏實現實例變量不是useRef的特長嗎？這裏爲啥使用的是useMemo?

useMemo代替useRef?

若是隻是實現實例變量，那麼 useMemo是否能夠代替useRef？如：

const ref = useRef(null);
const ref2 = useMemo(() => { current: null }, []);

使用上沒問題，但不是最佳實踐。

1. useMemo會跟蹤依賴項，而且經過比較依賴項是否發生變化決定是否從新執行函數。即便依賴項是個空數組，可是內部仍是會作部分額外的邏輯。因此性能上比useRef要差。
2. React對useMemo定位只是用於性能優化，並不保證在依賴項不變時，就必定不會從新執行函數。

• How to memoize calculations?裏提到：

You may rely on useMemo as a performance optimization, not as a semantic guarantee.

• Dan在twiter：A few small updates to Hooks FAQ based on common questions.裏也強調：

useMemo() is a hint — not a guarantee. React may still choose to 「forget」 some memoized values to reclaim memory. Don’t rely on it for correctness

因此對於那些肯定不須要從新計算的值，則優先使用useRef，不要使用useMemo。

參考

整理自gitHub筆記：useMemo代替useRef ?!