前回は useEffectフック を使用し、描画後に行いたい処理を実行しました。
描画後に行いたい処理は一つとは限らず、条件によって行いたい、もしくは行わせたくない処理もあると思います。
useEffectフックの副作用関数の中で条件分岐を使用し実現する事も可能ですが、useEffectフックは描画後の変数の値が変更されたかによって、処理の実行可否を判断し実行すること事ができます。
これには依存配列というものを使用します。
依存配列とは
副作用の実行に起因する配列です。描画後、配列の値が変更されているとuseEffectフックが実行されます。
依存配列の使い方
useEffectフックの第二引数に配列を指定します。
以下は描画後に textVal の値が変更されているとuseEffectが実行されログを出力します。
// textValをログに表示する。
useEffect(() => {
console.log("textVal:" + textVal);
},[textVal])依存配列の例
例を見ながら依存配列について見てみましょう。
import React, {useState, useEffect} from 'react';
function App() {
const [textVal, setTextVal] = useState("");
const [fixVal, setFixVal] = useState("");
// テキストフィールドに文字を入力すると行われるイベント
const changeText = e => setTextVal(e.target.value);
// ボタン押下で行われるイベント
const createFixVal = () => {
setFixVal(textVal);
setTextVal("");
}
// textValをログに表示する。
useEffect(() => {
console.log("textVal:" + textVal);
},[textVal])
// fixValをログに表示する。
useEffect(() => {
console.log("fixVal:" + fixVal);
},[fixVal])
return (
<>
<input type="text" value={textVal} onChange={changeText} />
<button onClick={createFixVal}>決定</button>
<p>FixVal:{fixVal}</p>
</>
);
}
export default App;このソースコードはuseEffectフックを使用して以下を行います。
・テキストフィールドの値を変更すると、テキストフィールドに入力された値をステートへ保持します。
・テキストフィールドの値が変更(描画)されると、useEffectによってステートの値をログへ出力します。
・ボタンを押すとテキストフィールドに入力されている文字をステートへ保持します。またテキストフィールドの値をクリアします。
・ボタン押下によりテキストフィールドの値がクリア(描画)されると、テキストフィールドの値をログに出力します。
依存配列について
今回はuseEffectフックを2つ使用しています。一つは、テキストフィールドに関するuseEffectになります。
textValを依存配列に指定する事で、textValが変更されていた場合、副作用関数が実行されます。
// textValをログに表示する。
useEffect(() => {
console.log("textVal:" + textVal);
},[textVal])もう一つはボタン押下に関するuseEffectになります。
fixValを依存配列に指定する事で、fixValが変更されていた場合、副作用関数が実行されます。
// fixValをログに表示する。
useEffect(() => {
console.log("fixVal:" + fixVal);
},[fixVal])両方とも依存配列を指定しない場合、テキストフィールドの値を変更したタイミングでもボタン押下したタイミングでも、両方のuseEffectフックが実行されてしまいます。
最後に
特にありません。