React中useEffect与useCallback联动时如何满足exhaustive-deps规则？

是否可以合理禁用exhaustive-deps规则？ #

可以。这种场景属于合理禁用规则的情况：我们明确知道添加isAccepted或applyCode到依赖数组会触发非预期的重复调用（点击按钮后再次执行applyCode），同时缺失这些依赖不会导致陈旧闭包问题——因为useEffect的核心触发条件就是prices变化，而applyCode本身已经通过useCallback绑定了最新的code和prices，isAccepted的状态也只会影响是否执行，不会导致逻辑错误。

禁用时必须添加清晰的注释，避免后续维护误解：

useEffect(() => {
  if (isAccepted) applyCode();
  // eslint-disable-next-line react-hooks/exhaustive-deps -- 仅在prices变更时触发，避免点击按钮后重复执行applyCode
}, [prices]);

无需禁用规则的重构方案 #

如果不想禁用规则，可以通过以下两种方式重构：

方案1：用useRef跟踪最新状态与函数 #

通过useRef保存最新的isAccepted和applyCode，让useEffect只依赖prices，同时能获取到最新的状态和函数，避免依赖变更触发额外执行：

const codeApplier = ({ code, prices }: Props) => {
  const [isAccepted, setIsAccepted] = useState(false);
  const isAcceptedRef = useRef(isAccepted);
  const applyCodeRef = useRef<() => Promise<void>>();

  // 同步isAccepted状态到ref
  useEffect(() => {
    isAcceptedRef.current = isAccepted;
  }, [isAccepted]);

  const applyCode = useCallback(async () => {
    const validationResult = await callToApplyCode(code, prices);
    setIsAccepted(validationResult.status === "OK");
    // do more stuff
  }, [code, prices]);

  // 同步applyCode函数到ref
  useEffect(() => {
    applyCodeRef.current = applyCode;
  }, [applyCode]);

  // 仅在prices变化时触发，用ref获取最新状态和函数
  useEffect(() => {
    if (isAcceptedRef.current) {
      applyCodeRef.current?.();
    }
  }, [prices]);

  return <button onClick={applyCode} />;
};

方案2：抽离核心逻辑，分离触发时机 #

把验证优惠码的核心逻辑抽成独立函数，分别处理点击触发和prices变化触发的场景，让依赖数组完全符合ESLint规则：

const codeApplier = ({ code, prices }: Props) => {
  const [isAccepted, setIsAccepted] = useState(false);

  // 抽离核心验证逻辑，仅依赖必要参数和setIsAccepted（setIsAccepted是稳定的，无需加入依赖）
  const validateCode = useCallback(async (currentCode: string, currentPrices: typeof prices) => {
    const validationResult = await callToApplyCode(currentCode, currentPrices);
    const newIsAccepted = validationResult.status === "OK";
    setIsAccepted(newIsAccepted);
    // do more stuff，比如根据newIsAccepted执行后续操作
  }, []);

  // 点击按钮触发的逻辑
  const applyCode = useCallback(() => {
    validateCode(code, prices);
  }, [code, prices, validateCode]);

  // prices变化时触发的逻辑，依赖完整且符合规则
  useEffect(() => {
    if (isAccepted) {
      validateCode(code, prices);
    }
  }, [isAccepted, code, prices, validateCode]);

  return <button onClick={applyCode} />;
};

方案对比 #

• 方案1：复用了applyCode逻辑，避免代码重复，但需要额外的ref同步逻辑，适合applyCode逻辑复杂的场景。
• 方案2：依赖清晰，完全符合ESLint规则，代码更直观，但需要抽离核心逻辑，适合逻辑相对简单的场景。

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