【React】ざっくり解説 useStateの基礎

useStateとは？

useStateとは関数コンポーネントにてstateを保持・更新するための機能です。

stateとは各コンポーネントが持つ状態のことを指します。コンポーネント内で動的に変わる部分はuseStateを使って管理するのが良いでしょう。

具体的にどう言うことか例を見て確認していきましょう！

useStateの使い方

今回はuseStateを使ってボタンを押すと数字をカウントアップする機能を実装していこうと思います。

import React, { useState } from "react"; //①

export const Fruit = () => {
  const [num, setNum] = useState(0);　//②

  const onClickCountUp = () => {
    setNum(num + 1);　//④
  };

  return (
    <>
      <button onClick={onClickCountUp}>カウントアップ</button>
      <br />
      <p>{num}</p>　//③
    </>
  );
};

①useStateを分割代入で取り出す

②配列の分割代入で取り出す。取り出すものは二つ。一つめはstateとして使用する変数名。二つめがそのstateを更新するためのもの。useStaeの（）の中には初期値を設置できる。今回は0としている。

③設定した初期値、0が入っている

④stateを更新する処理。()に中に更新したい処理を書く。

このようにコンポーネント内で動的に変わる部分はuseStateで定義して、その中に変数と更新関数を定義することで簡単に動的な実装が可能になります。