React中基于Prop的DerivedState与useEffect依赖问题咨询

你的场景属于半受控组件的派生状态问题，完全不需要禁用 ESLint 规则，有更合理的处理方案：

问题本质 #

你当前的写法里，useEffect 依赖了 props.defValue 但引用了组件内部的 value 状态，ESLint 的警告是合理的——因为闭包会捕获旧的 value 值，可能导致判断逻辑失效。而如果把 value 加入依赖数组，用户每次输入修改 value 都会触发 useEffect，进而把 value 重置回 props.defValue，这显然违背了允许用户修改输入的需求。

推荐解决方案 #

方案1：用函数式更新避免闭包问题 #

利用 setValue 的函数式更新特性，直接获取最新的状态值做判断，这样就不需要把 value 加入依赖数组，同时能保证判断逻辑的准确性：

function Derived(props) {
  let [value, setValue] = useState(props.defValue);

  useEffect(() => {
    console.log("useEffect runs");
    setValue(prevValue => {
      // 只有当传入的props值和当前状态不同时才更新
      if (prevValue !== props.defValue) {
        return props.defValue;
      }
      return prevValue; // 返回原状态，避免不必要的重渲染
    });
  }, [props.defValue]); // 仅依赖props.defValue，符合ESLint规则

  return (
    <div>
      value:
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
}

方案2：用 useRef 跟踪最新状态 #

如果需要在 useEffect 里直接比较当前状态和 props 值，可以用 useRef 实时同步最新的 value，这样既符合依赖数组规则，又能拿到最新状态：

function Derived(props) {
  let [value, setValue] = useState(props.defValue);
  const latestValue = useRef(value);

  // 同步最新的value到ref
  useEffect(() => {
    latestValue.current = value;
  }, [value]);

  useEffect(() => {
    console.log("useEffect runs");
    if (latestValue.current !== props.defValue) {
      setValue(props.defValue);
    }
  }, [props.defValue]); // 仅依赖props.defValue

  return (
    <div>
      value:
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
}

为什么不建议禁用 ESLint 规则？ #

禁用 react-hooks/exhaustive-deps 会掩盖潜在的闭包问题——比如当 props.defValue 短时间内多次变化时，旧的 value 值会被闭包捕获，导致判断逻辑出错，最终出现状态不同步的 bug。规则存在的意义就是帮你规避这类常见错误。

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