React では、useEffect() 内で関数を作成することと、それを別のファイルからインポートすることの違いは何ですか?

Question

職場で次のようなコードを見つけました

リーリー

ここでは、useEffect() に updateValues() という名前の関数があり、複数のステータス更新を実行できることがわかります。パフォーマンスの問題を解決するには、この関数を別のファイルにエクスポートするように言われました。

リーリー

私はいつもこのようなことが実際に React に問題があるのではないかと疑問に思っていました。 React の公式ドキュメントでは useEffect() で複数の関数の例が提供されていますが、ガベージ コレクションについてはほとんど言及されていません。ガベージコレクションがインポートされた関数を適切なタイミングで適切に破棄するかどうか疑問に思っています。

私の仮定は、関数などをインポートすると、メモリ内に何かが作成され、それが必要ではない場合でもそこに残るということです。

useEffect() 内でメモリとガベージ コレクションがどのように動作するかについての説明を探しているだけなので、この質問が「意見ベースの」質問であるかどうかはわかりません。

Answer 1

これを行うことをお勧めする理由は、コンポーネント コードが実行されるたびに useEffect が作成されるためです (レンダリングよりも頻繁に実行される可能性があります)。これらはすべて、作成時間の 90% で使用されないため、作成やガベージ コレクションは役に立ちません。したがって、コンポーネントの外に移動できるものが多ければ多いほど良いのです。インポートされた関数 (または機能コンポーネントの外部で作成した関数) がガベージ コレクションされても、コンポーネント内で定義したものは何百回、何千回も作成されるのに対し、その関数は 1 回しか作成されないため、それほど問題にはなりません。

正直に言うと、関数とその使用法は少し奇妙です。これは単なる疑似コードだと思います。そうでない場合は、このように useEffect 関数本体の方が良いでしょう

リーリー

また、useReducer の使用を検討してください。これは、開発者がよりよく理解できる方法でコンポーネントの外部で関数を定義するのに役立ちます。