投稿日:2023/06/12 最終更新日:2023/06/13
【実用】useStateを改めて正しく理解する
Reactはユーザインターフェースを構築するための人気のあるJavaScriptライブラリです。
Reactの中でも重要なフックの1つがuseStateです。
この記事では、ReactのuseStateフックの成り立ちから仕組みまでを詳しく解説します。
useStateの成り立ち
useStateフックは、関数コンポーネントで状態を管理するための仕組みです。
Reactの初期のバージョンでは、クラスコンポーネントでのみ状態管理が可能でした(書くのが結構めんどくさかった)が、フックの導入によりコード量がかなり削減された形で関数コンポーネントでも状態を扱うことができるようになりました。
useStateの使い方
useStateフックを使用するためには、以下の手順を実行します。
- Reactをインポートし、関数コンポーネントを作成します
- useStateフックをインポートします
- useStateフックを呼び出し、初期値を指定します
このフックは、現在の状態の値とそれを更新するための関数を返します
import React, { useState } from 'react';
function MyComponent() {
const [state, setState] = useState(initialValue);
// stateの値を使用するためのコード
return (
// JSXを返すコンポーネントの内容
);
}useStateの仕組み
useStateフックの仕組みは以下のようになっています。
- useStateフックは、関数コンポーネントが初めて呼び出されたときに実行され、初期値を受け取ります
- useStateフックは、現在の状態の値とそれを更新するための関数を返します
- コンポーネントのレンダリング中に状態を更新すると、Reactは自動的に再レンダリングをトリガーし、最新の状態を表示します
useStateの特徴
複数のuseStateフックを使用して、複数の状態を管理することができます。また、非同期的に動作し、状態の更新をバッチ処理して効率的に行います。呼び出し順序は、コンポーネント内での位置に依存します。
useStateの注意点(超重要)
一番の注意点はイミュータブルな値として処理をしなければいけないということです。
JavaScriptでは破壊的メソッド(spliceなど)と非破壊的メソッド(sliceなど)が存在しますが、基本的には破壊的メソッドは使用しないでください。
理由としてReactではレンダー→コミットの流れの中でDOMのどの箇所が変更されたのかを記録をします。
そして、変更前と変更後の差分を保存しておくことで余分なDOMの生成を抑えるため軽い処理を実現しています。
そのため、破壊的メソッドを使用すると変更前の差分が一致しなくなるため表示としては問題ないにしても後々バグの原因となる可能性が大いにあります。
Strict Modeを使用することでテスト時に2回レンダリングされるため、破壊的メソッドが使用された場合はエラーが出力されますが、stateの値を変更する場合は非破壊的メソッドでコピーを作成してからsetStateすることを覚えておいて下さい。
レンダリングの仕組みについてはこちらの記事で解説しています。
まとめ
このようにuseStateフックは関数コンポーネントで状態を管理するための重要な仕組みです。
このフックを使用することで状態の値を追跡して安全に更新することができます。
正しい使い方を理解しuseStateフックを上手に活用することで、柔軟で効率的なReactコンポーネントを作成することができますのでこの内容はぜひ覚えておくようにしましょう。
