はじめに
Reactで副作用を扱うフックにuseEffectがありますが、従来のcomponentDidMountのようにマウント時に1度だけ実行したい場合があります。
公式ドキュメントを読んでも方法が分からなかったので、備忘録をかねて投稿します。
useEffectとは
Reactのフックという機能がありますが、その中でも副作用を扱うためのフックです。
副作用とは、
- 引数以外の要因で返り値が変化する関数
- 自身の関数の外に影響を与える関数
のような関数のことで、具体的には以下のような処理を伴う関数を指します。
- API通信などの外部への通信
- DOMの変更
- 状態の変更
公式ドキュメントでは、以下のような例が記載されています。
useEffectに渡されたコールバック関数内で、DOM（document.title）を変更しています。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffectをマウント時に1回だけ実行する方法
上記のuseEffetctに渡されるコールバック関数を、コンポーネントのマウント時に1回だけ実行するには、第2引数に空の配列を渡します。
useEffect(() => { ... }, []);
useEffectの第2引数に配列を渡すと、マウント時とその要素に変更があった場合にコールバック関数を実行するように動作します。
例えば何らかのidに変更があった場合に、API通信してデータを取得する、などの使い方ができます。
const [id, setId] = useState(0);
useEffect(() => { ... }, [id]); // idに変更があった場合に、コールバック関数を実行する。
まとめ
以上、useEffectをマウント時に1回だけ実行する方法でした。
実際の業務ではuseEffectでAPI通信をすることが多いと思いますが、初回マウント時にAPIから取得したデータを表示する、という要件は多いかと思いますので、ご参考になればと思います。