[解決済み] useEffectの無限ループ

質問

React 16.7-alphaの新しいフックシステムで遊んでいるのですが、扱う状態がオブジェクトまたは配列の場合、useEffectで無限ループに陥ってしまいます。

まず、useStateを使用して、このように空のオブジェクトで開始します。

const [obj, setObj] = useState({});

そして、useEffectで、setObjを使って、再び空のオブジェクトに設定しています。第二引数として、[obj]を渡しています。 内容 のオブジェクトは変更されていません。しかし、更新され続けている。コンテンツに関係なく、これらは常に異なるオブジェクトであるため、Reactはそれが変化し続けると思っているのでしょうか？

useEffect(() => {
  setIngredients({});
}, [ingredients]);

配列の場合も同様ですが、プリミティブなのでさすがにループにはまることはありません。

この新しいフックを使って、コンテンツが変更されたかどうかをチェックする場合、オブジェクトや配列をどのように扱えばいいのでしょうか？

どのように解決するのですか？

useEffectの第2引数に空の配列を渡すと、マウントとアンマウント時のみ実行されるようになり、無限ループが発生しなくなります。

useEffect(() => {
  setIngredients({});
}, []);

のReactフックに関するブログ記事で、このことが明らかにされました。 https://www.robinwieruch.de/react-hooks/