【React・hooks】useEffectの使い方を具体的に解説！

ReactのuseEffectとは
useEffectの実行タイミングを制御しよう

ReactのuseEffectとは

React Hooksの1つであるuseEffectを使用すると、コンポーネント内で副作用的な処理を実行することができます。

副作用の例としては、データの取得、DOMの直接更新、タイマーなどがあります。

useEffectの構文は以下のように2つの引数を受け取ります。なお、2つ目の引数はオプションです。

useEffect(関数, 依存対象)

useEffectは基本的にコンポーネントがレンダリングされる度に、第一引数の関数が実行されます。

そのため、最初に要素が読み込まれる時はもちろんですが、その後で画面の描画内容が変更される毎に関数が実行されてしまいます。

ただ、第2引数に渡す内容によって関数の実行タイミングを制御することもできます。

useEffectの実行タイミングを制御しよう

ここからは、useEffectのコントロールするやり方を3つ紹介します。

第2引数に何も渡さなかった場合
第2引数に空の配列を渡した場合
第2引数に特定のステートを渡した場合

以下で順に解説しますね。

useEffectの第2引数に何も渡さなかった場合

useEffect(() => {
  // レンダリングする度に実行される
});

以下の例だと、レンダリングが発生した時は毎回useState内のconsole.logが実行されます。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('田中')

  useEffect(() => {
    console.log('useEffect実行！')
  });

  return (
    <div>カウント: {count}</div>
    <button onClick={() => setCount(count + 1)}
    <button onClick={() => setName('高橋')}
  )
}

useEffectの第2引数に空の配列を渡した場合

useEffect(() => {
  // 最初にレンダリングされた時だけ実行される
}, []);

以下のコード例だと、初めにDOMがレンダリングされた時だけ、console.logが実行されることになります。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('田中')

  useEffect(() => {
    console.log('useEffect実行！')
  }, []);

  return (
    <div>カウント: {count}</div>
    <button onClick={() => setCount(count + 1)}
    <button onClick={() => setName('高橋')}
  )
}

useEffectの第2引数に特定のステートを渡した時

useEffect(() => {
  // まず最初のレンダリング時に実行される
  // 加えてステートが変更された時に実行される
}, [state]);

以下の例だと、一番最初のレンダリングと、countの値が変更される度にconsole.logが実行されます。

nameの値が変更された時はuseEffectは実行されないことに注意です。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('田中')

  useEffect(() => {
    console.log('useEffect実行！')
  }, [count]);

  return (
    <div>カウント: {count}</div>
    <button onClick={() => setCount(count + 1)}
    <button onClick={() => setName('高橋')}
  )
}