ReactのuseEffectフックでの副作用の処理方法

Reactの関数コンポーネントでは、useEffectフックを使用することで、副作用の処理を行うことができます。副作用とは、コンポーネントがレンダリングされた際に発生する、状態の変更やAPI通信などの処理のことです。今回は、useEffectフックで副作用を処理する方法について解説します。

useEffectフックとは

useEffectフックは、関数コンポーネント内で副作用を実行するために使用されます。このフックは、第一引数にコールバック関数を受け取ります。このコールバック関数は、コンポーネントが初期化された際に一度だけ実行されます。また、useEffectフックは、第二引数に依存配列を受け取ることができます。この依存配列に指定された変数が変更された場合に、再度コールバック関数が実行されます。

useEffectフックでの副作用の処理方法

useEffectフックを使用することで、以下のような副作用を処理することができます。

状態の変更

コンポーネントがレンダリングされた際に、状態を変更する処理を行うことができます。例えば、以下のようなコードで、ボタンがクリックされた際に、countの状態を1増やすことができます。

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

このコードでは、useEffectフック内で、document.titleを更新しています。この処理は、countの状態が変更された際に実行されます。

API通信

コンポーネントがレンダリングされた際に、API通信を行う処理を行うことができます。例えば、以下のようなコードで、GitHub APIからユーザー情報を取得することができます。

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

function Example({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      const response = await fetch(`https://api.github.com/users/${userId}`);
      const data = await response.json();
      setUser(data);
    }

    fetchUser();
  }, [userId]);

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.bio}</p>
    </div>
  );
}

このコードでは、useEffectフック内で、fetchUser関数を実行しています。この処理は、userIdの値が変更された際に実行されます。また、ユーザー情報を取得するまで、”Loading…”という文字列を表示しています。

イベントリスナーの登録・解除

コンポーネントがレンダリングされた際に、イベントリスナーを登録・解除する処理を行うことができます。例えば、以下のようなコードで、マウスがクリックされた際に、コンポーネント内の要素を非表示にすることができます。

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

function Example() {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    function handleClick() {
      setIsVisible(false);
    }

    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div style={{ display: isVisible ? 'block' : 'none' }}>
      Click anywhere to hide this element
    </div>
  );
}

このコードでは、useEffectフック内で、addEventListenerとremoveEventListenerを使用して、clickイベントのリスナーを登録・解除しています。また、依存配列に空の配列を指定することで、コンポーネントが初期化された際にのみ、一度だけ実行されるようにしています。

まとめ

useEffectフックを使用することで、関数コンポーネント内で副作用の処理を行うことができます。状態の変更やAPI通信、イベントリスナーの登録・解除など、様々な副作用を処理することができます。しかし、useEffectフックを使用する際には、無限ループを防ぐために、依存配列を適切に設定する必要があります。