React useRef 怎么追踪上一次渲染的值？

Question

仓乃文 · Accepted Answer

React 没有内置的 prevProps/prevState 机制，但可以用 useRef 在每次渲染结束后保存当前值，下次渲染时 ref.current 就是上一次的值。

自定义 Hook：
```javascript
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;  // 渲染后保存当前值
  });
  return ref.current;  // 本次渲染返回的是上一次的值
}

// 使用
function SearchResults({ query }) {
  const prevQuery = usePrevious(query);
  useEffect(() => {
    if (query !== prevQuery) {
      console.log("搜索词从", prevQuery, "变为", query);
      fetchResults(query);
    }
  }, [query, prevQuery]);
}
```

为什么不用 useState：
```javascript
// 错误：setPrevQuery 会触发额外渲染
const [prevQuery, setPrevQuery] = useState(query);
useEffect(() => {
  setPrevQuery(query);  // 触发二次渲染
}, [query]);
```

补充说明：
- useEffect 在渲染后执行，所以 ref.current 的更新总是「慢一拍」
- 首次渲染时 ref.current 是 undefined，使用时需要判空
- useRef 不触发重渲染，不会导致无限循环或额外渲染
- 如果需要在渲染期间读取上一次的值，用 useLayoutEffect 替代 useEffect