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 ?!