无需useEffect实现Props变更时更新状态：自定义Hook性能咨询

我知道React官方不推荐用useEffect处理内部状态更新，官网给出的方案虽然可行，但维护和扩展起来太麻烦。我自己写了个useDerivedState自定义Hook，目前运行正常，但不确定它和useEffect比有没有性能差异，也想知道有没有更好的实现方案，希望能得到相关分析和建议。

自定义useDerivedState Hook代码 #

const shouldUpdate = (dependencies = [], prevDependencies = []) => {
  if (!prevDependencies) return true;
  if (!dependencies.length) return false;

  for (const index in dependencies) {
    if (!Object.is(dependencies[index], prevDependencies[index])) return true;
  }

  return false;
};

export function useDerivedState(callBack, dependencies = [], shouldRunFirstTime = true) {
  const [prevDependencies, setPrevDependencies] = useState(() =>
    shouldRunFirstTime ? null : dependencies
  );

  if (shouldUpdate(dependencies, prevDependencies)) {
    callBack();
    setPrevDependencies([...dependencies]);
  }
}

使用示例 #

const Component = ({ triggerX, ...otherProps }) => {
  const [list, setList] = useState(() => getList(otherProps))
  const [otherState, setOtherState] = useState(someInitialValue)
    // other states and refs

  useDerivedState(() => {
    // getNewValue or do some other React operations
    setList(getTriggerXList(list))
  }, [triggerX]);

    // other triggers and handlers

  return // render or hook args
};

性能差异分析 #

• 同步vs异步执行：你的useDerivedState在组件渲染阶段同步执行回调，会直接延长当前渲染时长，若回调包含重计算或状态更新，可能引发界面卡顿；而useEffect是渲染完成后异步执行，不会阻塞渲染，用户体验更流畅。
• 依赖对比逻辑：你实现的shouldUpdate和React内置依赖对比逻辑基本一致，但React内部做了缓存依赖引用、避免无效遍历等优化，自定义逻辑在依赖项极多的极端场景下可能有微小性能损耗，但日常使用差距不大。
• 额外渲染触发：每次依赖变化时，你的Hook会先执行回调更新状态，再调用setPrevDependencies触发额外一次组件渲染；而useEffect里的状态更新只会触发一次后续渲染，这是两者较明显的性能差异点。

你的Hook存在的潜在问题 #

• 违反Hook规则风险：在渲染阶段直接调用setPrevDependencies，若回调逻辑导致依赖项频繁变化，可能触发无限重渲染循环。React明确规定，渲染阶段不能直接调用状态更新函数（初始化除外），否则易引发不可预测的组件行为。
• 回调执行时机不可控：同步执行的回调会影响当前渲染输出，可能导致组件渲染结果不一致，增加调试难度。

更优解决方案 #

方案1：用useMemo计算派生状态（优先推荐） #

如果只是根据依赖项计算派生状态，无额外副作用，直接用useMemo缓存计算结果，完全避免状态更新带来的额外渲染：

const Component = ({ triggerX, ...otherProps }) => {
  const initialList = useState(() => getList(otherProps))[0];
  const list = useMemo(() => {
    return getTriggerXList(initialList);
  }, [triggerX, initialList]);

  // ...其他逻辑
};

这种方式无额外状态更新，性能最优，也符合React设计理念。

方案2：用useSyncExternalStore（复杂场景适用） #

如果派生状态依赖外部数据或需要更精确控制，可使用React官方提供的useSyncExternalStore，它专门用于同步外部状态到组件内部，比自定义Hook更稳定可靠。

方案3：优化自定义Hook（若坚持使用） #

若一定要用自定义Hook，可改用useRef存储依赖，避免触发额外渲染：

const shouldUpdate = (dependencies = [], prevDependencies = []) => {
  if (!prevDependencies) return true;
  if (!dependencies.length) return false;

  for (const index in dependencies) {
    if (!Object.is(dependencies[index], prevDependencies[index])) return true;
  }

  return false;
};

export function useDerivedState(callBack, dependencies = [], shouldRunFirstTime = true) {
  const prevDependenciesRef = useRef(shouldRunFirstTime ? null : dependencies);

  if (shouldUpdate(dependencies, prevDependenciesRef.current)) {
    callBack();
    prevDependenciesRef.current = [...dependencies];
  }
}

用ref存储依赖不会触发组件重渲染，解决了之前的额外渲染问题，但仍需注意回调逻辑不要阻塞渲染。

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