函数组件中setState更新完成后如何执行指定函数？

当你需要在特定的状态更新操作后执行回调，而非所有状态变化都触发时，useEffect显然无法满足需求（它会监听所有状态更新）。以下是几种可行的解决方案：

方案1：自定义带回调的useState Hook #

自己封装一个支持回调的状态管理Hook，完全替代原生useState，用法和类组件的setState(newState, callback)一致，无需依赖第三方库：

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

function useStateWithCallback(initialState) {
  const [state, setState] = useState(initialState);
  const callbackRef = useRef(null);

  // 重写setState，支持传入回调函数
  const setStateWithCallback = (newState, callback) => {
    callbackRef.current = callback;
    setState(newState);
  };

  // 状态更新完成后执行回调
  useEffect(() => {
    if (callbackRef.current) {
      callbackRef.current(state);
      callbackRef.current = null; // 执行后清空，避免重复触发
    }
  }, [state]);

  return [state, setStateWithCallback];
}

// 使用示例
function App() {
  const [count, setCount] = useStateWithCallback(0);

  const func1 = () => {
    // 调用带回调的setCount，更新完成后执行func2
    setCount(prev => prev + 1, () => {
      func2();
    });
  };

  const func2 = () => {
    console.log("func1的setCount完成，执行func2");
  };

  const func3 = () => {
    // 普通调用，不传回调，不会触发func2
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={func1}>触发func1</button>
      <button onClick={func3}>触发func3</button>
    </div>
  );
}

这个方案复用性强，逻辑清晰，是最推荐的解决方案。

方案2：用useRef标记触发来源 #

如果不想自定义Hook，可以通过useRef记录本次状态更新是否来自需要触发回调的操作，再在useEffect中判断执行：

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

function App() {
  const [count, setCount] = useState(0);
  const shouldRunFunc2 = useRef(false);

  const func1 = () => {
    // 标记本次更新需要触发func2
    shouldRunFunc2.current = true;
    setCount(prev => prev + 1);
  };

  const func2 = () => {
    console.log("func1的setCount完成，执行func2");
  };

  const func3 = () => {
    // 不标记，更新后不会触发func2
    setCount(prev => prev + 1);
  };

  useEffect(() => {
    if (shouldRunFunc2.current) {
      func2();
      shouldRunFunc2.current = false; // 执行后重置标记
    }
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={func1}>触发func1</button>
      <button onClick={func3}>触发func3</button>
    </div>
  );
}

这个方案适合简单场景，但需要手动维护标记，多场景下容易遗漏或误触发。

方案3：React 18+ 结合useTransition #

如果你的项目使用React 18，可以利用useTransition追踪状态更新完成的时机，同时结合useRef标记触发来源：

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

function App() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();
  const isFunc1Triggered = useRef(false);

  const func1 = () => {
    isFunc1Triggered.current = true;
    // 用startTransition包裹状态更新，追踪更新状态
    startTransition(() => {
      setCount(prev => prev + 1);
    });
  };

  const func2 = () => {
    console.log("func1的setCount完成，执行func2");
  };

  const func3 = () => {
    setCount(prev => prev + 1);
  };

  // 当更新完成（isPending变为false）且是func1触发时，执行回调
  useEffect(() => {
    if (!isPending && isFunc1Triggered.current) {
      func2();
      isFunc1Triggered.current = false;
    }
  }, [isPending]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={func1}>触发func1</button>
      <button onClick={func3}>触发func3</button>
    </div>
  );
}

这个方案适合需要批量更新或低优先级更新的场景，但逻辑相对复杂，仅推荐React 18项目使用。

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