ReactのuseEffectを使用して初期レンダリングを回避する方法

2024-02-10 03:51 React useEffect 初期レンダリング

初期レンダリング時にuseEffectを回避するためには、以下の方法を使用することができます:

  1. 条件付きでuseEffectを実行する: useEffect内で条件をチェックし、初期レンダリング時には副作用を実行しないようにすることができます。例えば、特定のステートが変更された場合にのみuseEffectを実行するように指定することができます。
useEffect(() => {
  if (condition) {
    // 副作用のコード
  }
}, [dependency]);
  1. 空の依存配列を指定する: useEffectの第2引数として空の配列([])を指定することで、初期レンダリング時にのみuseEffectを実行し、それ以降のレンダリングでは無視するようにすることができます。
useEffect(() => {
  // 副作用のコード
}, []);
  1. カスタムフックを作成する: 初期レンダリング時に実行する必要のない副作用を持つコンポーネント用に、カスタムフックを作成することもできます。カスタムフック内で条件をチェックして、初期レンダリング時には副作用をスキップするようにします。
function useCustomEffect() {
  useEffect(() => {
    if (condition) {
      // 副作用のコード
    }
  }, [dependency]);
}
function MyComponent() {
  useCustomEffect();
  // コンポーネントのコード
}

これらの方法を使用することで、初期レンダリング時に不要な副作用を回避することができます。適切な方法を選択し、パフォーマンスの向上を実現しましょう。