ReactのuseEffectフックの使い方と例

以下に、useEffectフックの使い方といくつかのコード例を示します。

コンポーネントのマウント時に実行されるuseEffect:

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    console.log('コンポーネントがマウントされました');
    // ここに実行したい副作用のコードを書く
  }, []);

  // コンポーネントのレンダリング
  return (
    <div>
      {/* コンポーネントの内容 */}
    </div>
  );
}

特定のプロパティが変更された場合に実行されるuseEffect:

import React, { useEffect, useState } from 'react';
function MyComponent({ count }) {
  useEffect(() => {
    console.log('countの値が変更されました:', count);
    // ここに実行したい副作用のコードを書く
  }, [count]);

  // コンポーネントのレンダリング
  return (
    <div>
      {/* コンポーネントの内容 */}
    </div>
  );
}

コンポーネントのアンマウント時に実行されるuseEffect:

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    return () => {
      console.log('コンポーネントがアンマウントされました');
      // ここにクリーンアップのコードを書く
    };
  }, []);

  // コンポーネントのレンダリング
  return (
    <div>
      {/* コンポーネントの内容 */}
    </div>
  );
}

これらはいくつかの基本的なuseEffectの例ですが、実際のプロジェクトに応じてさまざまな使い方があります。useEffectフックは、データの取得、サブスクリプションの設定、イベントリスナーの追加など、さまざまな副作用の処理に使用されます。