最近Reactを勉強し始め、useStateの仕組みが理解しづらかったのでまとめておきます。

0. なぜuseState()が必要なのか

Reactではページ更新時に一度ページ全体をレンダリングした後、個々のコンポーネントを再レンダリングしたい場合、任意の関数コンポーネントを個別で再実行しなければいけません。

その際に、イベントリスナーをonClick などで指定すると呼び出した関数だけを実行してくれた後に元の関数コンポーネントを再実行してくれません。（回帰処理を試してみましたがErrorになりました。）

そこでuseStateで返ってきたset関数を使うことで、値を保持、更新しつつ元の関数コンポーネントを再実行（再レンダリング）することができます。

1.importしておく

import React, { useState } from 'react';

2.useStateの基本的な動き

useState（） は引数にinitalValueを渡してあげます。（型はなんでもOK）
<引数>
React側で渡された値をどこかのメモリに記憶しておいてくれます。詳しくは、以下のブログで解説されてましたが、流し読みしちゃいました。
https://sbfl.net/blog/2019/02/09/react-hooks-usestate/

<戻り値>
戻り値は、現在の状態と、状態更新用の関数を配列で返してくれるので、Destructuring Array で受け取ってあげます。この時、
const [好きな変数名, set好きな変数名] ＝ useState(initialValue);
と命名してあげるのが一般的なようです。

以下使用例です。

const Title = (props) => {
  const [title, setTitle] = useState(props.title);

  const clickHandler = () => {
    setTitle('Updated!');
  }

  return (
    <div>
      <h2>{title}</h2>
      <button onClick={clickHandler}>Change Title</button>
    <div/>
  );
}

3.最後に

自分がわかりづらかったと感じたところだけをまとめたので、より詳しい解説や文法はReactの公式や他の記事を探してください。以下に自分が参考にした記事と教材をまとめたのでご参考にどうぞ。

https://sbfl.net/blog/2019/02/09/react-hooks-usestate/
https://udemy.com/course/react-the-complete-guide-incl-redux