Reactの即時関数の実装

Reactの即時関数の実装

Reactの即時関数（Immediately Invoked Function Expression、IIFE）は、関数を定義すると同時にそれを即座に実行するJavaScriptのパターンです。
これは特定のスコープを作成し、そのスコープ内で変数や関数を定義して実行するためによく使われます。
Reactコンポーネント内でIIFEを使うことは一般的ではありませんが、特定のシナリオでは便利です。

例えば、コンポーネントが初期化される前に一度だけ実行される処理を定義する場合などに使うことができます。

以下は、Reactコンポーネント内でIIFEを使用する簡単な例です。

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [data, setData] = useState<number | null>(null);

  useEffect(() => {
    // IIFEを使って即時にデータを取得
    (async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result.value);
      } catch (error) {
        console.error('データの取得に失敗しました', error);
      }
    })();
  }, []);

  return (
    <div>
      {data !== null ? <p>データ: {data}</p> : <p>データを読み込み中...</p>}
    </div>
  );
};

export default MyComponent;

この例では、useEffectフック内でIIFEを使用して非同期データ取得を行っています。
IIFEを使用することで、即座に関数を実行し、データを取得してコンポーネントの状態を更新しています。

IIFEのメリットは、スコープを汚染せずに一度だけ実行したいコードを簡潔に書ける点にあります。
ただし、Reactのコンポーネント内では他の方法（例：カスタムフックなど）を使うことが推奨される場合もあるため、適切な場面での使用を心がけましょう。