【React】useStateとは？

useState()とは？

useStateは関数コンポーネントにてstateを保持・更新するための機能です。
初回のレンダリングで、初期値となる値をuseStateに引数として渡し、その値が1つ目の要素のstateとなります。
2つ目の要素はstate値を更新するための関数となり、基本的にこの関数を使ってstate値を更新します。

https://qiita.com/shimajiri/items/55c1846dd3012ce3dfc8

useState()の戻り値

useState() の戻り値は以下の2つとのこと。

• state変数
• stateを更新するための関数

デモ

export default function AddColorForm({ onNewColor = f => f }) {
  const [title, setTitle] = useState("");
  const [color, setColor] = useState("#000000");
  console.log("title " + title + " , " + "color " + color);

  const submit = e => {
    e.preventDefault();
    onNewColor(title, color);
    setTitle("");
    setColor("");
  };

  return (
    ...
  );
}

動画は、以下useState箇所の戻り値2つを、console.logで表示確認してみたものになります。

• const [title, setTitle] = useState("");
• const [color, setColor] = useState("#000000");

参考図書：Reactハンズオンラーニング 第2版