useState
useState の形
前のレッスンで、画面に出したい値は state にすると決めました。state を作る道具が useState です。
JavaScript (JSX)
const [likes, setLikes] = useState(0);短い 1 行ですが、3 つのことを同時にやっています。
useState(0)で「最初は 0 の state を 1 つください」と React に頼む- 返ってきた 今の値 を
likesという名前で受け取る - 返ってきた 更新するための関数 を
setLikesという名前で受け取る
左辺の角かっこは配列の分割代入です。useState は「今の値」と「更新関数」の 2 つを配列で返すので、それを 2 つの変数に分けて受け取っています。
どこから持ってくるのか
useState は React が用意している関数なので、使う前にファイルの先頭で読み込みます。
JavaScript (JSX)
import { useState } from "react";この 1 行を書き忘れると useState is not defined というエラーになり、画面が真っ白になります。JSX を書くだけなら import は要りませんが、フックを使うときは必ず要ると覚えてください。このあと出てくる useEffect も同じ形で読み込みます。
名前の付け方
変数名は自由ですが、更新関数は set + 値の名前 にするのが React の慣習です。likes なら setLikes、name なら setName とします。読む人がひと目で組だと分かるので、この形から外れないようにしてください。
JavaScript (JSX)
const [name, setName] = useState("あおい");
const [isOpen, setIsOpen] = useState(false);
const [works, setWorks] = useState([]);数値だけでなく、文字列も真偽値も配列もオブジェクトも state にできます。useState に渡した値が最初の値になります。
const なのに変えられるのか
const [likes, setLikes] = ... と書いているのに値を変えられるのは不思議に見えます。実際 likes に代入することはできません。値を変えるのは setLikes の仕事で、setLikes を呼ぶと React がコンポーネントをもう一度呼び直し、そのときに 新しい値が入った新しい likes が作られます。
つまり likes は「今回の描画のあいだだけ有効な、その時点の値のコピー」です。書きかえるのではなく、毎回新しく受け取り直していると考えてください。
表示に混ぜる
state の値は普通の変数と同じように JSX の中で使えます。
JavaScript (JSX)
import { useState } from "react";
export default function App() {
const [likes, setLikes] = useState(0);
const [name, setName] = useState("あおい");
return (
<div>
<h1>{name}のプロフィール</h1>
<p>いいね {likes}</p>
</div>
);
}つまずきどころ
useState はコンポーネント関数の 一番上 で呼びます。if の中や for の中、関数の途中では呼べません。React は「何番目に呼ばれた useState か」で値を見分けているので、呼ぶ順番が回によって変わると値が入れかわってしまうためです。この決まりは第 8 章でもう一度扱います。
もう 1 つ、useState() のように初期値を省くと最初の値が undefined になり、画面に何も出ません。数値なら useState(0)、文字列なら useState("") のように、型に合った初期値を必ず渡します。
演習
プロフィールのいいね数と表示回数を state として宣言し、画面に出します。