React useEffect冗余依赖疑问：currentTenant变更时doSomething会执行两次吗？

1. currentTenant变更时，doSomething()会执行两次吗？ #

会的。具体流程是：

• 当currentTenant更新，触发第一个依赖[currentTenant, currentProjects]的useEffect，此时currentProjects还是旧值，doSomething()执行第一次；
• 紧接着，以currentTenant为依赖的第二个useEffect触发，调用setCurrentProjects()更新currentProjects；
• currentProjects更新完成后，再次触发第一个useEffect，doSomething()执行第二次。

2. 这种写法是否冗余？ #

是的，存在明显冗余。因为currentProjects完全由currentTenant驱动更新，两个依赖项强绑定，导致doSomething()被重复触发，而且第一次执行时currentProjects还是旧值，大概率不符合业务预期。

3. 更好的实现方式 #

有两种常用的优化方案：

方案一：合并逻辑到设置currentProjects的useEffect中

直接在更新currentProjects后调用doSomething()，避免重复触发：

useEffect(() => {
  // 这里计算或获取最新的currentProjects值
  const newProjects = getProjectsByTenant(currentTenant);
  setCurrentProjects(newProjects);
  // 直接传入最新参数，无需依赖状态
  doSomething(newProjects, currentTenant);
}, [currentTenant]);

如果setCurrentProjects是异步操作（比如接口请求），可以在异步回调中执行doSomething()：

useEffect(() => {
  fetchProjects(currentTenant).then(newProjects => {
    setCurrentProjects(newProjects);
    doSomething(newProjects, currentTenant);
  });
}, [currentTenant]);

方案二：移除currentTenant依赖，仅保留currentProjects

如果doSomething()只依赖currentProjects（或currentProjects已包含currentTenant的必要信息），可以简化第一个useEffect：

useEffect(() => {
  // 可选：避免初始空值触发无效执行
  if (currentProjects) {
    doSomething();
  }
}, [currentProjects]);

这样只有当currentProjects真正更新后，doSomething()才会执行一次，且使用的是最新的currentProjects值。

4. 是否可以移除doSomething()对应的useEffect中的currentTenant依赖？ #

取决于doSomething()的实际逻辑：

• 如果doSomething()只需要currentProjects的值，或者currentProjects的更新已完全反映currentTenant的变化，完全可以移除currentTenant依赖，采用方案二即可；
• 如果doSomething()需要同时使用currentTenant和currentProjects的值，更推荐方案一，直接在设置currentProjects的useEffect中调用doSomething()，确保参数都是最新的，避免依赖重复。

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