useState｜基礎を学ぶ - ゆめさくコード

useState の形

前のレッスンで、画面に出したい値は state にすると決めました。state を作る道具が useState です。

const [likes, setLikes] = useState(0);

短い 1 行ですが、3 つのことを同時にやっています。

useState(0) で「最初は 0 の state を 1 つください」と React に頼む
返ってきた 今の値 を likes という名前で受け取る
返ってきた 更新するための関数 を setLikes という名前で受け取る

左辺の角かっこは配列の分割代入です。useState は「今の値」と「更新関数」の 2 つを配列で返すので、それを 2 つの変数に分けて受け取っています。

どこから持ってくるのか

useState は React が用意している関数なので、使う前にファイルの先頭で読み込みます。

import { useState } from "react";

この 1 行を書き忘れると useState is not defined というエラーになり、画面が真っ白になります。JSX を書くだけなら import は要りませんが、フックを使うときは必ず要ると覚えてください。このあと出てくる useEffect も同じ形で読み込みます。

名前の付け方

変数名は自由ですが、更新関数は set + 値の名前 にするのが React の慣習です。likes なら setLikes、name なら setName とします。読む人がひと目で組だと分かるので、この形から外れないようにしてください。

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 の中で使えます。

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 として宣言し、画面に出します。

useState