はじめに
前回はReact HooksのuseStateについて紹介しました。（こちら）今回は第2弾としてuseEffectを紹介します。
useEffectとは
副作用フックと呼ばれ、関数をどのタイミングで発火させるかをしていすることができます。
初期表示の際にだけ発火する関数。ある変数が変わった時に発火する関数。などを指定することができます。
useEffectの基本形
useEffectは以下のように書きます。
useEffect(() => {}, []);第一引数：コールバック関数
第二引数：配列
一言で説明すると、第二引数で指定された変数に変化があった場合に、第一引数の関数を発火するです。
useEffectの使い方
使い方を説明します。
- 初期表示のみ関数（以下の例ではconsole.log()）を発火させたい場合
const TestComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('初期表示のみ発火');
}, []);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>+</button>
<div>{count}</div>
</div>
);
};- countが変化した時に関数（以下の例ではconsole.log()）を発火させたい場合
const TestComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('countが変化するたびに発火');
}, [count]);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>+</button>
<div>{count}</div>
</div>
);
};上記の2例をみると、第二引数に空の配列を指定した場合は初期表示時のみ。第二引数の配列に変数を入れた場合は変数が変わった場合に発火ということがわかります。
ちなみに、第二引数に変数を指定した場合でも初期表示時に発火します。また、第二引数に複数の変数を入れた場合はどれかが変化した時に発火します。（[count, count1, count2]など）
useEffectの注意点
useEffectを使用する上での注意点が2つあります。
一つは第二引数の変数を第一引数で変化させない。もう一つは第二引数は必ず配列を指定する。
- 第二引数の変数を第一引数で変化させない
この場合、無限ループすることになり、アプリケーションが正常に動作しなくなる場合があります。
（悪い例その１）
const TestComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('countが変化するたびに発火');
setCount(count + 1);
}, [count]);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>+</button>
<div>{count}</div>
</div>
);
};
- 第二引数は必ず配列を指定する
第二引数を指定しなかった場合、エラーになるわけではありません。ただこれをすると、画面の状態が変わるたびにuseEffectの関数が発火してしまします。パフォーマンス低下につながるので、避けた方がいいです。
（悪い例その２）
const TestComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('countが変化するたびに発火');
setCount(count + 1);
});
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>+</button>
<div>{count}</div>
</div>
);
};終わりに
useEffectもReactでアプリケーション開発をする上で欠かせないHooksの一つですが、用法を間違えるとパフォーマンスの低下につながりますので、注意が必要です。
コメント