props から関数を使用すると useEffect が起動するのはなぜですか (関数は変更されていません)。

Question

メインコンポーネントはモーダル/ダイアログを呼び出しています。

リーリー

MyDialog コードは次のとおりです:

リーリー

[キャンセル] をクリックして onClose を呼び出すと、useEffect が triggered であることがわかります。理由は何ですか？私の理解では、onClose 関数オブジェクト (props から) は変更されないため、そうすべきではないということです。

Answer 1

React の useEffect フックは、依存関係配列内の依存関係が変更されると実行されます。あなたの場合、 useEffect は onClose プロパティに依存します。したがって、onClose プロパティが変更されるたびに実行されます。

ただし、コード内の onClose 関数が変更されていない場合でも、JavaScript が関数識別を処理する方法により、useEffect が引き続き実行される可能性があります。 JavaScript では、関数を定義するたびに、それがまったく同じことを行う場合でも、新しいインスタンスが作成されます。

したがって、あなたの場合、コンポーネントが再レンダリングされるたびに、レンダー関数の新しい関数として closeDialog を定義します。これは、React の観点から見ると、onClose は useEffect をトリガーするたびに新しい関数であることを意味します。

この問題を解決するには、useCallback フックを使用して、依存関係が変更されない限り、closeDialog 関数がレンダリング間で安定した ID を持つようにします。 リーリー

上記の例では、

useCallback は、依存関係の 1 つが変更された場合にのみ変更される関数のメモ化されたバージョンを返します。この場合、依存関係配列は空 ([]) です。これは、closeDialog 関数の ID が再レンダリング後も安定したままであることを意味します。