💐
useEffect について【React】
はじめに
useEffect について実務で学んだので、自分自身の振り返り用に備忘録として書き残しておきます。
フロント環境
React
TypeScript
useEffect とは
公式ドキュメント
ReactのuseEffectを使用すると、コンポーネントのレンダリング後に特定の処理を呼び出すことができます。主な用途は以下の通りです。
- データの取得やAPIの呼び出し
- DOMの更新や外部リソースの操作
useEffect(() => {
// 実行される処理
}, []);
useEffect は、副作用を実行するためのReactHookです。
副作用とは？
副作用とは、useEffect内に記述された処理のことを指します。
通常、コンポーネントのレンダリングとは切り離して行いたい処理を記載します。
useEffect の第二引数について
useEffect の[] (第二引数)の中には、依存する関数や変数を配列形式で記載することができます。これを依存配列と呼びます。
依存配列を使用することで、レンダリングのタイミングを制御することができます。
第二引数を指定しない場合
副作用は全てのレンダリングが終わった後に実行されます。
useEffect(() => {
// 副作用
});
第二引数に空配列を渡す場合
副作用は初回レンダリングが行われた時のみ実行されます。
useEffect(() => {
// 副作用
}, []);
第二引数に配列を渡した場合
第二引数の配列内の要素に変更があった場合に副作用が実行されます。
useEffect(() => {
// 副作用
}, [text, id, name]);
サンプルコード
以下はuseEffect のコード例です。
useEffect を使うことで、コンポーネントのレンダリングと副作用を分離して実行することができます。
import React, { useEffect, useState } from 'react'
export function Example() {
const [text, setText] = useState("");
useEffect(() => {
console.log("text が変更されました")
}, [text]);
const handleChangeText = () => {
setText("こんにちは");
};
return (
<div>
{text}
<button onClick={handleChangeText}>テキストを変更</button>
</div>
);
}
上記サンプルコードでは、ボタンをクリックするとtextに格納された文字列が変更され、useEffectが実行されてコンソールに出力されます。
参考記事：
Discussion