ReactのuseEffectフックの使い方

1年 ago
夏樹, 風
1 minute

Reactでは、useEffectは副作用の処理を行うReactのフック関数です。コールバック関数と依存性配列をパラメータとして受け取ります。

useEffectの使いみちについて、以下に示します。

  1. 非依存配列を渡さない：
  2. useEffect(() => {
    // コンポーネントの再描画後に実行される(初期描画と再描画含む)
    // データ取得、イベントハンドラの登録などの副作用処理をここに記載可能
    // 関数を返すことで、コンポーネントの破棄前または次回のuseEffect実行前に、クリーンアップ処理を実行できる
    return () => {
    // クリーンアップ処理
    };
    });
  3. 空の依存配列を渡す:
  4. useEffect(() => {
    // コンポーネントの最初のレンダリングが完了した後にのみ実行し、コンポーネント再レンダリング時には実行しない
    }, []);
  5. 非空依存性の配列を渡す:
  6. useEffect(() => {
    // 指定した依存関係のみ変更された場合に実行します。
    }, [依存関係1, 依存関係2]);

useEffectでは用途に応じて使い分けを行います。コンポーネントのマウント時とレンダリングのたびに副作用を実行したい場合は、依存配列を渡さない、コンポーネントのマウント時に一度だけ副作用を実行したい場合は、依存配列に空の配列を渡し、指定した依存関係が変更された場合に副作用を実行したい場合は、依存配列に空以外の配列を渡します。

bannerAds