【簡単解説！】useEffectとは

フロントエンド

2024年11月22日

50 Views

はじめに

この記事ではReactを使う上で避けては通れないuseEffectについて解説していきます！
初学者用に簡単にかみ砕いて解説していきますよ～(/・ω・)/

目次 [ close ]

useEffectとは？

useEffectは指定した処理をコンポーネントのレンダリング後に実行するよ！な機能のことです。

……何のためにそんなことするんだ？

何のために使うのか

useEffectって3種類あります。

その3種類はというと、

第二引数に何も指定しない場合

第二引数に空の配列を指定した場合

第二引数に値が指定されている場合

です。

上記それぞれでユースケースが異なります。

ただ、useEffectの主な使用用途はAPIを叩く時になるかなと思います。（もちろん作成するシステムの仕様によって他にもいろいろな使用用途がありますよ！）

上記場面によってuseEffectのふるまいが変わるので、まず構文について解説させてください。<(_ _*)>

構文

useEffectの構文は以下です！。

useEffect(calllbackFunc, [依存する変数の配列])

「依存する変数の配列」の部分が第二引数です。

useEffectは第二引数に指定した値が変更されてレンダリングされた後に、第一引数に指定した処理が実行されます。

関数コンポーネントのレンダリングは次のタイミングで行われます。

・コンポーネントの初回レンダリング時
・親コンポーネントがレンダリングされたとき
・コンポーネント内で定義されたuseState()の状態に変化があったとき
・コンポーネントに渡されるpropsに変更があったとき

などです。

ユースケース

第二引数に何も指定しない場合

この場合、対象コンポーネントの全てのレンダリングの後に第一引数で指定した処理が実行されます。

第二引数に値を指定しないでuseEffectを使うというのは、パフォーマンス的にもよくないのであまり使わないです。

……どういう時に使うんだろう？(´・ω・)

第二引数に空の配列を渡す場合

この場合コンポーネントの初回レンダリング時のみ第一引数の中身が実行されます

コンポーネントがレンダリングされるたびにAPIを叩くと画面も重いし、無駄に叩くことになる場合が多いですよね。

そのため、この処理は最初に一回だけ実行できればいいんじゃい！な時に使います。

import { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空の依存配列で初回レンダリング時のみ実行

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

第二引数に値が指定されている場合

この場合、第二引数に指定した値が更新されるたびに、第一引数の処理を実行します。

ある値を参考して実行している処理とか、その値が変更になったら処理やり直さなきゃいけないよ～！な時に使います。

import { useState, useEffect } from 'react';

function FilteredData({ filter }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(`https://api.example.com/data?filter=${filter}`)
      .then(response => response.json())
      .then(data => setData(data));
  }, [filter]); // filterが変わるたびに再実行

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}