如何让useEffect在渲染完成前执行？或有无合适替代方案？

云原生阿岚

2026-8-26

解决方案

你可以通过以下几种方式实现依赖项变化时同步执行函数，无需等待渲染完成：

1. 自定义同步执行的Hook

创建一个类似useEffect但在渲染阶段同步执行的Hook，直接在依赖变化时立即触发回调：

import { useRef } from 'react';

function useImmediateEffect(callback, dependencies) {
  const prevDeps = useRef([]);
  
  // 对比当前依赖与上一次的依赖是否变化
  const depsChanged = dependencies.some((dep, idx) => !Object.is(dep, prevDeps.current[idx]));
  
  if (depsChanged) {
    callback();
    prevDeps.current = [...dependencies];
  }
}

使用方式和useEffect完全一致，但它会在状态更新后的渲染过程中同步执行回调，不会像useEffect那样等到渲染完成、浏览器绘制后才执行。

注意：回调函数不能包含无限制触发重新渲染的操作（比如无条件调用setState），否则会导致无限渲染循环。

2. 在事件处理中同步执行

如果你的状态更新是在事件处理函数中触发的，可以用flushSync强制同步更新状态，之后立即执行目标函数：

import { flushSync, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 强制同步更新状态
    flushSync(() => {
      setCount(count + 1);
    });
    // 状态已更新，立即执行函数
    doSomethingWithNewCount(count + 1);
  };

  return <button onClick={handleClick}>Click</button>;
}

flushSync会让React立即处理状态更新，后续代码可以拿到最新的状态值，且无需等待渲染完成。