React：当另一状态达到特定值时仅更新一次状态

情况1：可以修改自定义Hook（或能提PR到依赖库） #

你可以给useAsyncState添加一个完成计数器，用来标记每次异步操作的完成事件，替代仅用固定done状态的方式，让组件能准确识别新的完成事件，避免重复触发更新：

import { useEffect, useState } from "react";
import "./styles.css";

function useAsyncState() {
  const [status, setStatus] = useState("idle");
  // 添加计数器，每次异步完成时递增
  const [completionCount, setCompletionCount] = useState(0);

  function trigger(value) {
    setStatus(`sending ${value}`);
    setTimeout(function () {
      setStatus("done");
      // 每次完成时更新计数器，标记新的完成事件
      setCompletionCount(prev => prev + 1);
    }, 1500);
  }

  return [status, trigger, completionCount];
}

export default function App() {
  const [value, setValue] = useState(0);
  const [status, trigger, completionCount] = useAsyncState();

  useEffect(() => {
    // 监听计数器变化，每次变化执行一次递减
    setValue(prev => prev - 1);
  }, [completionCount]);

  return (
    <div className="App">
      <p>
        status: {status}
        <button onClick={() => trigger(value)}>send & decrement</button>
      </p>
      <p>
        value: {value}
        <button onClick={() => setValue(prev => prev + 1)}>increment</button>
      </p>
    </div>
  );
}

这个方案的优势：

• 彻底避免无限循环：仅当新的异步完成时计数器才变化，useEffect只会触发一次
• 天然支持多次触发：每次异步完成对应一次value递减
• 函数式更新setValue(prev => prev -1)无需依赖value，减少不必要的重渲染依赖

情况2：无法修改自定义Hook（依赖库提供，不能改动） #

如果不能修改外部Hook，可以在组件内用useRef记录已处理的完成事件，结合函数式更新避免无限循环：

import { useEffect, useState, useRef } from "react";
import "./styles.css";

function useAsyncState() {
  const [status, setStatus] = useState("idle");

  function trigger(value) {
    setStatus(`sending ${value}`);
    setTimeout(function () {
      setStatus("done");
    }, 1500);
  }

  return [status, trigger];
}

export default function App() {
  const [value, setValue] = useState(0);
  const [status, trigger] = useAsyncState();
  // 记录已处理的完成次数
  const processedDoneCount = useRef(0);
  // 标记每次异步触发的唯一ID
  const currentTriggerId = useRef(0);

  useEffect(() => {
    if (status === "done") {
      // 仅处理未记录过的新完成事件
      if (processedDoneCount.current !== currentTriggerId.current) {
        setValue(prev => prev - 1);
        processedDoneCount.current = currentTriggerId.current;
      }
    }
  }, [status]);

  return (
    <div className="App">
      <p>
        status: {status}
        <button onClick={() => {
          trigger(value);
          // 每次触发异步时递增ID
          currentTriggerId.current += 1;
        }}>send & decrement</button>
      </p>
      <p>
        value: {value}
        <button onClick={() => setValue(prev => prev + 1)}>increment</button>
      </p>
    </div>
  );
}

这个方案的关键：

• 用currentTriggerId标记每次异步触发，确保每个done状态对应唯一的一次触发，避免重复处理
• 函数式更新setValue无需依赖value，解决原代码中value变化导致useEffect重复执行的问题
• 完全在组件内处理，无需修改外部Hook

关于“单次渲染完成更新”的优化 #

原代码中useEffect会导致两次渲染（status变为done一次，value更新一次），要实现单次渲染完成更新，需要自定义Hook支持回调能力——在trigger方法中允许传入完成回调：

// 修改后的useAsyncState（支持完成回调）
function useAsyncState() {
  const [status, setStatus] = useState("idle");

  function trigger(value, onDone) {
    setStatus(`sending ${value}`);
    setTimeout(function () {
      setStatus("done");
      // 完成时直接执行回调，和status更新同属一次渲染流程
      onDone?.();
    }, 1500);
  }

  return [status, trigger];
}

// 组件中使用
export default function App() {
  const [value, setValue] = useState(0);
  const [status, trigger] = useAsyncState();

  return (
    <div className="App">
      <p>
        status: {status}
        <button onClick={() => {
          trigger(value, () => {
            // 回调中直接更新value，合并为一次重渲染
            setValue(prev => prev - 1);
          });
        }}>send & decrement</button>
      </p>
      <p>
        value: {value}
        <button onClick={() => setValue(prev => prev + 1)}>increment</button>
      </p>
    </div>
  );
}

这个方案中，status更新和value更新会合并为一次重渲染，完全满足“单次渲染完成更新”的需求，但前提是你能修改自定义Hook的实现。

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