在 useEffect 挂钩中使用对象属性而不是对象作为依赖项是不好的做法吗？

Question

我在我的功能组件中使用以下代码。我希望这个组件仅在 game._id 更改时重新渲染。但是 React 一直给我警告：

React Hook useEffect 缺少依赖项：'game'。要么包括 它或删除依赖数组

如果我明确希望它依赖于给定的属性，这是一种危险的做法还是合理的做法？

  const [game, setGame] = useState({});

  useEffect(() => {
    return () => {
      if (game._id !== undefined) {
       // Do stuff with game
      }
    };
  }, [socket, user, game._id]);

我不想将游戏用作依赖项，因为这会使我的组件重新渲染太多。

Answer 1

依赖数组检查自上次渲染后值是否发生变化。它不关心价值来自哪里，或者它的形状。问题出在 linter 上，它看到在 useEffect 中使用了 game，尽管它没有注册为依赖项。声明gameId并将其赋值为game._id，并将其用作依赖项，并在useEffect内部：

const [game, setGame] = useState({});

const gameId = game._id;

useEffect(() => {
  return () => {
    // use gameId inside useEffect
    if (gameId !== undefined) {
      // Do stuff with game
    }
  };
}, [socket, user, gameId]); // set gameId as dependency