useEffect依赖中使用对象属性而非完整对象是否属于不良实践？

风险说明 #

你当前的写法存在不可忽视的闭包风险，React的依赖警告是合理的：

• 你的useEffect清理函数中访问了完整的game对象，但依赖数组仅声明了game._id，当game的其他属性更新但_id保持不变时，useEffect不会重新执行，清理函数中捕获的game永远是_id最后一次变化时的旧快照，无法拿到最新的game值，会导致逻辑不符合预期。
• 举个实际场景：假设game._id固定为a1b2c3，第一次赋值的game为{_id: 'a1b2c3', score: 0}，后续调用setGame更新为{_id: 'a1b2c3', score: 100}，此时_id未变化，useEffect不会重新注册，清理函数执行时拿到的game.score还是旧的0，而非最新的100。

兼容需求的解决方案 #

如果你明确只需要在game._id变化时触发useEffect逻辑，又不想将完整game加入依赖导致频繁执行，可以用以下两种成熟方案处理：

• 方案1：用useRef存储最新的game对象
  单独维护一个ref同步最新的game值，ref本身不需要加入依赖数组，就能随时拿到最新值：

  const [game, setGame] = useState({});
  const latestGameRef = useRef(game);
  
  // 每次game更新时同步到ref
  useEffect(() => {
    latestGameRef.current = game;
  }, [game]);
  
  useEffect(() => {
    return () => {
      const currentGame = latestGameRef.current;
      if (currentGame._id !== undefined) {
        // 这里直接使用currentGame即可，永远是最新值
        // Do stuff with currentGame
      }
    };
  }, [socket, user, game._id]);
  

• 方案2：将所有用到的game属性都加入依赖数组
  如果清理函数中实际只用到了game的少数几个属性，直接把这些属性全部列到依赖数组即可，不需要传入整个game对象：

  useEffect(() => {
    const { _id, status, owner } = game; // 把所有你用到的属性都解构出来
    return () => {
      if (_id !== undefined) {
        // 用解构出来的属性执行业务逻辑
      }
    };
  }, [socket, user, game._id, game.status, game.owner]); // 所有用到的game属性都加入依赖
  

不推荐直接用eslint注释屏蔽依赖警告，除非你100%确认闭包快照的行为符合你的预期，否则后续会出现极难排查的逻辑bug。

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