useEffectがわかないという方へ

投稿日: 2024年11月27日

学習振り返り

要約

useEffectはReactで副作用を管理するためのフックで、処理内容と依存配列を指定する。
依存配列を使うことで、特定の値の変化に応じて処理を実行でき、空の配列を渡すと初回レンダリング時のみ実行される。
関数のメモ化にはuseCallbackを使用し、useEffect内外で共通の関数を効率的に利用できる。

はじめに

昨日立て続けにuseEffectについてご質問をいただきまして、これから学習する人に向けて需要あるかもと思ったのでほとんどそのまま流用ですが書いときます！

わからんってなってる方は基本構文～依存配列を利用する例まで読んでみてください！

基本構文

useEffect(() => {
    //処理
}, [依存配列]);

第一引数：実行したい処理を書いた関数
第二引数：依存配列

依存配列の値に変化があった時に処理が実行されます。

依存配列を空にする（=useEffectの第二引数に空の配列を渡す）と、初回レンダリング時のみ処理が実行されます。

useEffect(() => {
   console.log("初回レンダリング時のみ実行");
}, []);

依存配列を利用する例

useEffect(() => {
    console.log(`count is ${count}`);
  }, [count]);

処理→console.log(`count is ${count}`);
依存配列→count

このようになっています！

つまり、countの値に変化があった時にコンソールにcount is ${count}の結果が出力されます。

応用

ここは応用なので、12章で初めて出会うかも？出会わないかも？くらいの内容です。

useEffectの外で定義した関数をuseEffect内で実行したい場合は関数をメモ化する必要があります。

メモ化とは
関数の呼び出し結果や、関数そのものをキャッシュしておき、あとで再利用できるようにすることです。パフォーマンスの最適化に役立つことがあり、3種類ありますがここでは関数のメモ化であるuseCallbackの使い方にのみ触れます。

サンプルコード

//インポートする
import { useState, useCallback, useEffect } from "react";

//省略
const [count, setCount] = useState(0);
const logCount = useCallback(() => {
    console.log("Current count:", count);
  }, [count]);

useEffect(() => {
    logCount();
}, [logCount]);

//省略