React HooksでcomponentDidMount相当の機能を実現する方法

2024-04-02

React フックにおける componentDidMount 相当の機能

そこで登場するのが useEffect フックです。useEffect は、コンポーネントのレンダリング後に副作用を実行するためのフックです。componentDidMount と同様に、useEffect は以下の2つの引数を受け取ります。

コールバック関数: 副作用を実行する関数
依存関係の配列: 依存関係の値が変化した時のみコールバック関数を呼び出す

componentDidMount 相当の機能を実現するには、useEffect フックの依存関係の配列に空の配列を渡します。これは、コンポーネントがマウントされた時のみコールバック関数が呼び出されることを意味します。

const MyComponent = () => {
  useEffect(() => {
    // componentDidMount 相当の処理
  }, []);

  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
};

上記のコードでは、useEffect フックのコールバック関数内で console.log を使って、コンポーネントがマウントされたことを出力しています。

useEffect フックは、componentDidMount 以外にも様々な用途に使用できます。例えば、以下のことができます。

コンポーネントの更新時 に処理を実行する
DOM 要素のイベントリスナー を登録・解除する
setInterval や setTimeout などのタイマーを設定する
API からデータを取得 する

useEffect フックは、React コンポーネントにおける副作用を管理するための強力なツールです。componentDidMount 相当の機能はもちろん、様々な用途に使用することができます。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // コンポーネントがマウントされた時に実行される処理
    console.log('コンポーネントがマウントされました');

    // タイマーを設定
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // コンポーネントがアンマウントされる時に実行される処理
    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <h1>カウント: {count}</h1>
    </div>
  );
};

このコードでは、以下の処理が行われます。

useState フックを使って、count という状態変数を初期値 0 で定義します。
useEffect フックを使って、コンポーネントがマウントされた時に以下の処理を実行します。
- コンソールに「コンポーネントがマウントされました」と出力します。
- 1秒ごとに count を1増やすタイマーを設定します。
useEffect フックの返り値を使って、コンポーネントがアンマウントされた時にタイマーをクリアします。

このコードを実行すると、コンポーネントがマウントされた時に「コンポーネントがマウントされました」と出力され、その後1秒ごとに count が1ずつ増えていくことが確認できます。

useEffect フックは、componentDidMount 以外にも様々な用途に使用できます。以下のサンプルコードは、useEffect フックを使ってできるその他の処理の例です。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // count が更新された時に実行される処理
    console.log('count が更新されました:', count);
  }, [count]);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        カウントを増やす
      </button>
    </div>
  );
};

このコードでは、count が更新された時にコンソールに count の値を出力します。

const MyComponent = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // input 要素にイベントリスナーを登録
    const inputElement = document.getElementById('my-input');
    inputElement.addEventListener('change', (event) => {
      setMessage(event.target.value);
    });

    // コンポーネントがアンマウントされる時にイベントリスナーを解除
    return () => {
      inputElement.removeEventListener('change', (event) => {
        setMessage(event.target.value);
      });
    };
  }, []);

  return (
    <div>
      <h1>メッセージ: {message}</h1>
      <input id="my-input" />
    </div>
  );
};

このコードでは、input 要素に入力された内容に応じて message の状態変数を更新します。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 5秒後に count を1増やす
    const timeout = setTimeout(() => {
      setCount(count + 1);
    }, 5000);

    // コンポーネントがアンマウントされる時にタイマーをクリア
    return () => {
      clearTimeout(timeout);
    };
  }, []);

  return (
    <div>
      <h1>カウント: {count}</h1>
    </div>
  );
};

このコードでは、5秒後に count を1増やします。

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // API からデータを取得
    fetch('https://api.example.com/data')
      .then(response => response.json())

useEffect フック以外で componentDidMount 相当の機能を実現する方法

useRef フックは、レンダリング間で値を保持するためのフックです。useEffect フックと異なり、useRef フックは副作用を実行しません。

const MyComponent = () => {
  const ref = useRef(null);

  useEffect(() => {
    // コンポーネントがマウントされた時に実行される処理
    ref.current = 'コンポーネントがマウントされました';
  }, []);

  return (
    <div>
      <h1>メッセージ: {ref.current}</h1>
    </div>
  );
};

このコードでは、useRef フックを使って ref という変数を定義し、コンポーネントがマウントされた時に "コンポーネントがマウントされました" という文字列を代入しています。

クラスコンポーネントを使う

useEffect フックは関数コンポーネントでのみ使用できます。クラスコンポーネントを使用する場合は、componentDidMount メソッドを使って componentDidMount 相当の機能を実現できます。

class MyComponent extends React.Component {
  componentDidMount() {
    // コンポーネントがマウントされた時に実行される処理
    console.log('コンポーネントがマウントされました');
  }

  render() {
    return (
      <div>
        <h1>メッセージ: コンポーネントがマウントされました</h1>
      </div>
    );
  }
}

このコードでは、componentDidMount メソッドを使って、コンポーネントがマウントされた時にコンソールに "コンポーネントがマウントされました" と出力しています。

カスタムフックを使う

useEffect フックや useRef フックを組み合わせて、componentDidMount 相当の機能を実現するカスタムフックを作成することもできます。

const useDidMount = () => {
  const ref = useRef(false);

  useEffect(() => {
    // コンポーネントがマウントされた時に実行される処理
    if (!ref.current) {
      ref.current = true;
      // ここに処理を記述
    }
  }, []);
};

const MyComponent = () => {
  useDidMount();

  return (
    <div>
      <h1>メッセージ: コンポーネントがマウントされました</h1>
    </div>
  );
};