1. ホーム
  2. reactjs

[解決済み] useEffectで、依存関係の配列を提供しない場合と、空の場合の違いは何ですか?

2023-01-10 08:37:27

質問

私は useEffect フックは、空の依存配列が提供された場合、すべてのレンダリングの後に実行されます。

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

しかし、これと次のような違いは何でしょうか?

useEffect(() => {
  performSideEffect();
});

がないことに注意してください。 [] がないことに注意してください。linterプラグインは警告を出しません。

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

ちょっと違いますね。

  • 空の配列を与えることは、次のように動作します。 componentDidMount のように、一度だけ実行されます。

  • 第二引数を与えないことは componentDidMountcomponentDidUpdate のように、マウント時に最初に実行され、その後再レンダリングのたびに実行されます。

  • 第二引数として、任意の値を含む配列を与える、例えば , [variable1] の中のコードだけが実行されます。 useEffect フック内のコードをマウント時に一度だけ実行し、特定の変数 (variable1) が変更されるたびに実行します。

2番目の引数について、またフックが実際にどのように働くかについての詳細は、以下の公式ドキュメントで読むことができます。 https://reactjs.org/docs/hooks-effect.html