如何将对象数组传入useEffect依赖数组？解决useDeepCompareEffect不触发问题

方案1：将Mobx Observable数组转为原生JS数组传入依赖 #

Mobx的tabArray是被包装后的ObservableArray实例，并非原生JS数组，直接传入依赖会导致深度比较无法正确识别与空原生数组的差异。使用Mobx的toJS方法将其转为原生数组后，深度比较就能正常工作：

import { toJS } from 'mobx';
import useDeepCompareEffect from 'use-deep-compare-effect';

// ...

useDeepCompareEffect(() => {
  // 你的业务逻辑
}, [toJS(engineGroupStore.tabArray)]);

方案2：直接操作原数组清空而非替换引用 #

不要通过setTabArray([])替换整个数组，而是在store中添加直接清空原数组的方法，保持数组引用不变，仅修改内容，这样深度比较能检测到内容变化：

// store.ts
import { makeObservable, observable, action } from 'mobx';
import { TabsType } from './type';

class EngineGroupStore {
  tabArray: TabsType[] = [];

  constructor() {
    makeObservable(this, {
      tabArray: observable,
      setTabArray: action,
      clearTabArray: action,
    });
  }

  setTabArray(tabs: TabsType[]) {
    this.tabArray = tabs;
  }

  clearTabArray() {
    this.tabArray.clear(); // 清空原数组，引用不变
  }
}

export default new EngineGroupStore();

调用时使用engineGroupStore.clearTabArray()替代setTabArray([])即可触发useDeepCompareEffect。

原因说明 #

Mobx的Observable数组是基于原生数组封装的特殊对象，拥有独立的原型链和内部状态。当你用原生空数组[]替换Observable数组时，use-deep-compare-effect在深度比较时可能因两者的类型差异（ObservableArray vs 原生Array）无法识别内容变化；而转为原生数组或保持引用修改内容，能让深度比较正确检测到数组内容的变更。

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