こんにちはフロントエンドエンジニアのまさにょんです!
今回は、ReactのuseStateでSetterによるStateの更新がされたら特定の処理をする方法について解説していきます。
目次
ReactでStateの更新が完了してから、特定の処理をする方法
ReactのuseState
フックを使って、SetterによってStateの更新が完了した後に特定の処理を実行する方法には、useEffect
フックを使う方法があります。
次のSampleでは、useEffect
フックの第2引数として[count]
を渡しています。
これはcount
が更新された場合にだけuseEffect
のコールバック関数を実行するように指定するためのものです。
import { useState, useEffect } from 'react';
function Example() {
// 1. State
const [count, setCount] = useState(0);
useEffect(() => {
// Stateが更新された際に実行したい処理を記述する!
console.log(`Count: ${count}`);
}, [count]);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment Count</button>
</div>
);
}
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!
React関連の書籍
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
![](https://www15.a8.net/0.gif?a8mat=3NNG1X+D8W8C2+3GWO+6O1Z5)
『GEEK JOBキャンプ』スピード転職コース(無料)
![](https://www13.a8.net/0.gif?a8mat=3NNG1X+DAOJ5E+40C4+5ZMCH)
【IT道場】入校時0円! 就職目的プログラミングスクール
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+DML78Y+53W0+609HT)
エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】
![](https://www14.a8.net/0.gif?a8mat=3NNGTV+ACPDGY+4VYG+60H7L)
『techgym』 (Python特化・無料)
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+C2MGDU+4PGA+BY641)