React フック（useEffect)を勉強してみた

はじめに

Next.jsを業務で使う機会があり、Nect.jsはReactベースということで、
まずはReactについて学んだ内容をアウトプットとしてまとめることとする。
今回の内容はuseEffect。

useEffectについて

useEffectとは？：
コンポーネントが描画（レンダー）された後に実行される関数を設定するためのReactフックのこと。
「見た目更新」以外の処理（副作用と言われる）を実行する場所。

どんな利用シーンがあるか？

• 画面が表示されたときにデータを読み込みたい時(API通信）
• ボタンを押して数値が変わったら、ローカルストレージに保存したい時
• コンポーネントが消える前にタイマーを止めたい時

実例

ボタンをクリックした回数が５回を超えたら、アラートを出すという処理を記載します。

コード全体

qiita.rb

"use client";
import { Box, Button } from "@mui/material";
import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    if (count > 5) {
      alert("5を超えました！");
      console.log("実行回数：", count);
    }
  }, [count]);

  return (
    <Box
      sx={{
        margin: 5,
        p: 2,
        border: "1px solid",
        borderRadius: 2,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 2,
      }}
    >
      <p>クリック回数：{count}回</p>
      <Button variant="contained" onClick={() => setCount(count + 1)}>
        クリック
      </Button>
    </Box>
  );
};
export default page;

※注：Next.js＋Muiを用いて書いております。

解説

・第二引数に{count}が入っているため、{count}の値が変わるたびに実行される
・countが５回よりも大きければアラートを出して、回数をログに記載。

qiita.rb

  useEffect(() => {
    if (count > 5) {
      alert("5を超えました！");
      console.log("実行回数：", count);
    }
  }, [count]);

表示結果

初期表示

ボタンを1回クリック後

ボタンを６回クリック後

アラートが出現する。

↓
ログに回数が出力される。

最小限の記述で任意のタイミングに処理を実行出来るのが良いですね。

第二引数の使い方

目的によって第二引数を変更することで、useEffectが実行されるタイミングを変えられます。

目的	書き方	タイミング	利用シーン
初回だけ処理をしたい	useEffect(() => {...}, [])	初回ロード時のみ	初期データの取得
状態変化で再実行したい	useEffect(() => {...}, [state])	stateが変化した時	入力値が変わるたびにバリデーション実行
毎回処理をしたい	useEffect(() => {...})	描画（レンダー）のたび	デバッグ時？ あまり使わなさそう
後始末が必要な処理	return () => {...}	アンマウント時・更新前	外部リソース接続を閉じるとき メモリリークを防ぎたいとき

さいごに

第二引数によって使い方を変えられるので、コンポーネント毎に見極めて便利に活用していきたい。