React フックを使うと、React の機能をクラスを書かずに使えるようになります。useEffect を使うと読み込みのレンダリング後や、更新された時に関数を実行することができます。この記事では、useEffectの使用例をまとめています。
ページが読み込み時
import React, { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('読み込みのレンダリング後のみ');
}, [])
const counter = () => {
setCount(count + 1);
}
return (
<div className="App">
{count}
<button onClick={counter}>button</button>
</div>
);
}
export default App;1: useEffect をインポートします。
7: 第２引数に空の配列を指定すると、第一引数のコールバック関数が、読み込みのレンダリング後のみ実行されます。
ある変数が更新時
import React, { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`読み込み時のレンダリング後・count(${count})の更新で再レンダリング後`)
return () => {
// クリーンアップなどの処理を書く
console.log(`count(${count})の更新で再レンダリングされる前`);
}
}, [count])
const counter = () => {
setCount(count + 1);
}
return (
<div className="App">
{count}
<button onClick={counter}>button</button>
</div>
);
}
export default App;11: 第２引数の配列に変数を指定すると、読み込みのレンダリング後に加え、変数 (count)が更新された時にも実行されます。
クリーンアップが必要な更新の場合は、第一引数の関数内で、9: クリーンアップ用の関数を返します。
これにより変数が更新されたら、9, 6 の順で実行されます。
何も指定しない場合
import React, { useState, useEffect } from "react";
function App() {
const [text, setText] = useState('');
const [count, setCount] = useState(0);
useEffect(() => {
console.log('読み込み時・再レンダリング後');
return () => {
console.log('再レンダリングされる前')
}
})
const counter = () => {
setCount(count + 1);
}
const inputValue = (e) => {
setText(e.target.value);
}
return (
<div className="App">
{count}
<button onClick={counter}>button</button>
<input type="text" value={text} onChange={inputValue} />
</div>
);
}
export default App;11: 第２引数に何も指定しなかった場合は、読み込みのレンダリング後に加え、再レンダリングされた時に実行されます。
例では、カウントアップ、フォーム入力時の再レンダリング毎に実行されます。
以上です。
