React

【React Hooks】useEffectとは?概念や使い方を徹底解説!

こんにちは、アプリ開発者のテルです!

「useEffectの使い方がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. useEffectの使い方をサンプルで理解できる
  2. コードを公開しているので、自分の環境で確かめることができる

【React Hooks】useEffectとは

  1. 指定した変数の状態によって再レンダリングを制御できる
  2. 副作用(関数外に影響を及ぼす処理)を記述できる

再レンダリングが起きる条件

  1. state更新時
  2. props変更時
  3. 親コンポーネントが再レンダリングされた時の子コンポーネント

useEffectを理解する上で、押さえておくべきポイントは上記の通りです。

では、実際の使用例を見ていきましょう!

▶︎ 公式ドキュメントはこちら

実際の使用例

プロジェクト構成

サンプルの「ディレクトリ構成」と「完成イメージ」は以下の通りです。

ディレクトリ構成

完成イメージ

上記は、シンプルなタイマーアプリです。スタートとストップでタイマーの進行状態を制御し、リセットでタイマーを初期化することができます。

useEffectを使用することで、再レンダリングのタイミングを制御しています。

では、ソースコードを用いて解説していきます!

ソースコード

Index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

import { useEffect, useState } from "react";

const Example = () => {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  // [isRunning]の値が変更されたときに実行する
  useEffect(() => {
    let interval = null;
    if (isRunning) {
      console.log("start");
      interval = window.setInterval(() => {
        console.log("update");
        // time を + 1 していく
        setTime((prev) => prev + 1);
      }, 1000);
    }
    // コンポーネントが削除されたときに実行される
    // setIntervalを止めるために記述する
    return () => {
      window.clearInterval(interval);
      console.log("end");
    };
  }, [isRunning]);

  // スタートとストップを制御する
  const toggle = () => {
    setIsRunning((prev) => !prev);
  };

  // タイマーをリセットする
  const reset = () => {
    setTime(0);
    setIsRunning(false);
  };

  return (
    <>
      <h3>
        <time>{time}</time>
        <span>秒経過</span>
      </h3>
      <div>
        <button onClick={toggle}>{isRunning ? "ストップ" : "スタート"}</button>
        <button onClick={reset}>リセット</button>
      </div>
    </>
  );
};

export default Example;

簡単解説

戻り値で記述した部分は、クリーンナップと呼ばれ、useEffectで実行した処理の後始末を行います。処理の順番は、先にクリーンナップ、次にuseEffectの実行内容です。

今回は依存配列に[isRunning]を入れることで再レンダリングを制御していますが、依存配列を空にした場合は、初回レンダリング時にuseEffectの内容が実行されます。

以上が、useEffectの基本的な使い方です。

まとめ

今回は「useEffectの使い方」を徹底解説しました。

React Hooksの機能の1つであるuseEffectを使うことで、指定した変数の状態によって再レンダリングを制御することができます。

Reactの実践的なスキルを身につけたいという方にはUdemyがおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。

▶︎【2022年最新】React学習におすすめのUdemy講座3選

最後までご覧いただきありがとうございました。ではまた!

参考文献
Flutter関連の書籍を出版しました!