Reactで初回のみ実行し、再レンダリングを防ぐ方法

Reactで初回のみ実行し、再レンダリングを防ぐ方法

Reactで初回レンダリング時のみ実行し、再レンダリングを防ぐ方法として、useEffectフックを使うことができます。
依存配列を空にすることで、コンポーネントのマウント時に一度だけ実行されるようになります。
以下にTypeScriptを使用した例を示します。

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

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

  useEffect(() => {
    // 初回レンダリング時に一度だけ実行される処理
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('データの取得に失敗しました:', error);
      }
    };

    fetchData();
  }, []); // 依存配列が空のため、初回レンダリング時にのみ実行

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

export default MyComponent;

このコードでは、useEffectフックの依存配列を空にすることで、コンポーネントが初めてレンダリングされたときにだけfetchData関数が実行されます。
fetchData関数内でデータを取得し、dataステートにセットしています。
データが取得できた場合とそうでない場合で表示する内容を切り替えています。