背景
こんにちは。エンジニアのKennieです。
最近フロントエンドの勉強をし始めてuseStateについて学びました。
公式ドキュメントを読みながら勉強していこうと思い、そこでuseStateについて学んだことを書いてみました！
1. Reactのstateは非同期で更新される
React のstateの更新は非同期で行われます。つまり、stateを更新するために下記のように setAge を呼び出しても、その時点で即座に変更されるわけではありません。実際の更新は、次のレンダーサイクルまで待たなければなりません。
以下の例では、年齢 (age) を1ずつ増やすボタンのクリックイベントを扱います。
const [age, setAge] = useState(42);
function handleClick() {
setAge(age + 1);
setAge(age + 1);
setAge(age + 1);
return (
<div>
<p>Current age: {age}</p>
<button onClick={handleClick}>Increase Age</button>
</div>
);
}
↑こちらのコードの動き
https://codesandbox.io/p/sandbox/react-dev-forked-x58vzm?file=%2Fsrc%2FApp.js%3A5%2C1
このコードでは、ボタンを1回押すと、最終的に age は43になります。なぜなら、すべての setAge(age + 1) は、最初の age の値（42）を基に計算されるからです。これは上記に書いたReactの非同期性によるもので、setAge を呼び出しても、再レンダーされるまで age の値は更新されないためです。
アップデータ関数を使った更新
function handleClick() {
setAge(preveAge => preveAge + 1); // setAge(42 => 43)
setAge(preveAge => preveAge + 1); // setAge(43 => 44)
setAge(preveAge => preveAge + 1); // setAge(44 => 45)
}
↑こちらのコードの動き
https://codesandbox.io/p/sandbox/react-dev-forked-mg6zxk?file=%2Fsrc%2FApp.js%3A9%2C32
各setAgeの呼び出しが、最新のageの値を基にして次の値を計算するため、ボタンを1回押すとageは3回増加し、最終的に+3されます。たとえば、ageが最初に42であれば、1回のクリックで45になります。このように、アップデータ関数を使用すれば前の値を基に新しい値を計算するため、意図通りの結果が得られます。
2. stateの更新におけるオブジェクトと配列
Reactでは、stateにオブジェクトや配列を使用することができますが、既存のオブジェクトを直接変更すべきではないとされています。具体的な例を用いて、その理由を説明します。
例
こちらは既存のオブジェクトを直接変更している例
const [userProfile, setUserProfile] = useState({ username: '', email: '' });
userProfile.username = 'Kennie';
こちらは置き換えをしている例
setUserProfile({
...userProfile,
username: 'Kennie'
});
解説
- 既存のオブジェクトを直接変更している場合: Reactではstateにある既存のオブジェクトを直接変更するとReactはその変更を検知できません。結果として、Reactが再レンダリングされたとき、username の値は 'Kennie' ではなく、依然として空の文字列 '' のままです。
-
新しいオブジェクトの作成: スプレッド構文（
...userProfile）を使用することで、元のuserProfileオブジェクトのプロパティをコピーし、新しいオブジェクトを作成します。この新しいオブジェクトは、元のものとは異なるメモリ領域に保存されるため、参照が変わり、Reactはstateの変更を正しく検知できるようになります。
参考リンク
あとがき
公式ドキュメントにはuseStateの様々な使い方が書かれていて、将来的にここで得た情報は開発をしている際、もしくはバグに出くわした際、役立ってくると感じました。