☰

useEffect の無限ループ 質問する

tag-icon • tag-icon reactjs react-hooks
useEffect の無限ループ 質問する

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

まず、useState を使用して、次のように空のオブジェクトで初期化します。

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

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

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

配列でも同じことが言えますが、プリミティブなので、予想どおりループに陥ることはありません。

これらの新しいフックを使用して、コンテンツが変更されたかどうかを確認するときに、オブジェクトと配列をどのように処理すればよいでしょうか?

ベストアンサー1

useEffect の 2 番目の引数として空の配列を渡すと、マウント時とアンマウント時にのみ実行されるため、無限ループが停止します。

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

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

おすすめ記事