useState()について学びを整理

いままで雰囲気で使っていたuseState()がどんなものかについてある程度理解できたので、雑にしたためておきます。

1.useStateとはなにか？

useStateは、状態の変化を検知し、コンポーネントの再レンダリングを行う特別な関数（hooks）です。

ボタンのクリックやフォーム入力等のユーザーアクションに合わせて画面を更新したいことがよくあると思いますが、そういう時にめちゃくちゃ便利ってわけです。

これがuseStateの基本的な記法↓

const [val, setVal] = useState(0);

useStateはこういう風に配列を持つんですね。0番目に値そのものvalが入り、1番目には更新用の関数setValを持ちます。

更新用の関数名は、値の名前にsetを付け足して表現します。
あと、useState(0)のように初期値を設定することが多いです。初期値なしでもエラーは出ませんが、その場合はundefinedが初期値になります。

useStateの基本的な使い方

useStateの基本的な使い方を、ボタンを押すたびに数値が1づつ増減する簡単なカウンター関数を作って確認していきます。

import { useState } from "react";

const Counter = () => {
	const [count, setCount] = useState(0);

	const countUp = () => {
		setCount(count + 1);
	};
	const countDown = () => {
		setCount(count - 1);
	};

	return (
		<>
			<span>{count}</span>
			<div>
				<button onClick={countUp}>+</button>
				<button onClick={countDown}>-</button>
			</div>
		</>
	);
};

こんな感じです。値に対し+1するハンドラと-1するハンドラを用意して、それぞれのボタンのonClick()に仕込んでいます。処理の流れとしては、ボタンのクリック-> countUp()/Down()発火 -> setCount()発火 -> そしてsetCount()内で行っている処理によって、ペアになっている値countが書き換わり、非同期でコンポーネントも再レンダリングされるという感じです。

ポイント

• 更新される値のことをstateと呼ぶ
• stateは非同期で再実行（レンダリング）される
  

あとはReactはツリー構造の位置でStateを識別してるとか、コンポーネントが消えた後もstateを保持し続ける方法とか色々と学んだのですが、このあたりはまた今度まとめることします。