React中useEffect依赖项问题：兼顾ESLint要求与避免无限循环

最优实现方式 #

用函数式更新获取最新的items状态，同时把依赖缩小到实际用到的item._id和options，既满足ESLint的依赖要求，又不会触发无限循环：

const [items, setItems] = useState({});

useEffect(() => {
  const newItem = {
    [item._id]: options
  };
  // 函数式更新能拿到最新的状态值，无需把items加入依赖
  setItems(prevItems => ({ ...prevItems, ...newItem }));
}, [item._id, options]); // 只依赖实际用到的item._id，而非整个item对象

关于依赖的疑问 #

• 不是必须传入所有内部使用的属性，但要保证依赖列表里的变量是实际影响useEffect逻辑的最小集合。ESLint的exhaustive-deps规则是为了避免闭包陷阱——如果不把用到的变量加入依赖，useEffect可能捕获到旧的变量值，导致状态更新不符合预期。
• 之前加整个item导致无限循环，大概率是因为item是引用类型（比如对象），每次组件渲染时父组件可能重新创建了item对象，导致依赖变化触发useEffect，而useEffect里更新状态又触发组件渲染，形成循环。改用item._id作为依赖，只要_id不变，即使item其他属性变化，也不会触发不必要的useEffect执行。

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