☰

一般的に、1 つのコンポーネントで 1 つ以上の useEffect フックを使用する方が良いでしょうか? [closed] 質問する

tag-icon • tag-icon reactjs performance react-hooks architecture use-effect
一般的に、1 つのコンポーネントで 1 つ以上の useEffect フックを使用する方が良いでしょうか? [closed] 質問する

React コンポーネントに適用する副作用がいくつかあり、それらを整理する方法を知りたいです。

  • 単回使用効果
  • または複数の使用効果

パフォーマンスとアーキテクチャの面ではどちらが優れていますか?

ベストアンサー1

従う必要があるパターンは、ユースケースによって異なります。

まず、最初のマウント時にイベント リスナーを追加し、アンマウント時にクリーンアップする必要がある状況や、プロパティの変更時に特定のリスナーをクリーンアップして再度追加する必要がある状況があるかもしれません。

このような場合、2つの異なるものを使用すると、useEffect関連するロジックを一緒に保つことができ、パフォーマンス上の利点も得られます。

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

2つ目:状態やプロパティが定義済みのセットから変更されたときに、API呼び出しやその他の副作用をトリガーする必要があります。このような場合は、useEffect監視する関連する依存関係を持つ単一の方が適しています。

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

3つ目:異なる変更セットに対して別々の副作用が必要です。このような場合、関連する副作用を異なるuseEffectsに分離します。

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

おすすめ記事