React Hook状态历史值存储异常求助：其他状态更新致新旧值一致

你当前的代码逻辑存在一个关键问题：useEffect是在组件渲染完成后执行的。当value更新时，组件先以新的value值完成渲染，此时prevValue.current还是旧值；随后useEffect触发，将prevValue.current更新为当前的value。但当其他状态（比如新增的count）更新导致组件重渲染时，value没有变化，useEffect不会执行，此时prevValue.current已经是上一次value更新后的最终值，因此会出现“历史值与当前值完全相同”的情况——这并不是你需要的「上一次value变化前的历史值」。

创建一个通用的自定义Hook来追踪状态的历史值，无论组件因何种原因重渲染，只要目标状态未变化，就会始终返回上一次的历史值。

import { useState, useEffect, useRef } from 'react';

// 自定义Hook：获取状态的上一次值
function usePrevious(value) {
  const ref = useRef();
  
  useEffect(() => {
    // 仅当value变化时，在渲染完成后更新ref
    ref.current = value;
  }, [value]);
  
  // 渲染时返回的是更新前的ref值（即上一次的value）
  return ref.current;
}

function App() {
  const [value, setValue] = useState("");
  // 模拟其他状态更新场景
  const [count, setCount] = useState(0);
  // 使用自定义Hook获取value的历史值
  const prevValue = usePrevious(value);

  return (
    <div>
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <button onClick={() => setCount(prev => prev + 1)}>点击更新其他状态</button>
      <div>Curr Value: {value}</div>
      <div>Prev Value: {prevValue ?? ""}</div>
      <div>其他状态count: {count}</div>
    </div>
  );
}

如果只需要追踪单个状态的历史值，也可以直接在更新状态的回调中提前保存旧值，避免依赖useEffect：

import { useState, useRef } from 'react';

function App() {
  const [value, setValue] = useState("");
  const [count, setCount] = useState(0);
  const prevValueRef = useRef("");

  const handleInputChange = (e) => {
    // 在更新value之前，先将当前value存入ref
    prevValueRef.current = value;
    setValue(e.target.value);
  };

  return (
    <div>
      <input
        value={value}
        onChange={handleInputChange}
      />
      <button onClick={() => setCount(prev => prev + 1)}>点击更新其他状态</button>
      <div>Curr Value: {value}</div>
      <div>Prev Value: {prevValueRef.current}</div>
      <div>其他状态count: {count}</div>
    </div>
  );
}

两种方案都能实现：

• 当value变化时，正确显示「当前值」和「上一次变化前的历史值」
• 当其他状态更新导致组件重渲染时，历史值不会被覆盖，始终保持value上一次变化前的数值

内容的提问来源于stack exchange，提问作者cheems