React.jsでuseEffectフックを使用する方法

基本的な使い方: useEffectフックを使用するには、以下のようにコンポーネント内で定義します。

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // 副作用のコードをここに書く
    // 例: APIリクエストの送信、DOMの変更、イベントの登録など
    return () => {
      // クリーンアップのコードをここに書く
      // 例: イベントの解除、リソースの解放など
    };
  }, []); // 依存配列を指定することで、特定の値が変更された場合にのみ再実行することもできます
  // コンポーネントの描画
  return (
    <div>
      {/* コンポーネントの内容 */}
    </div>
  );
}

依存配列を使用した再実行の制御: useEffectフックでは、依存配列を指定することで、特定の値が変更された場合にのみ再実行することができます。依存配列に変数を指定すると、その変数が変更されたときにのみuseEffect内のコードが再実行されます。

useEffect(() => {
  // 依存配列内の変数が変更されたときにのみ実行されるコード
}, [dependency1, dependency2]);

クリーンアップの処理: useEffectフックでは、クリーンアップの処理を行うために、コールバック関数を返すことができます。このコールバック関数は、コンポーネントがアンマウントされたり、再レンダリングされる直前に実行されます。

useEffect(() => {
  // マウント時の処理
  return () => {
    // アンマウント時のクリーンアップ処理
  };
}, []);

これらは、React.jsでuseEffectフックを使用する基本的な方法と一部の一般的なパターンです。詳細な使い方や応用的なケースについては、React公式ドキュメントや他のリソースを参照してください。