【React・hooks】useStateでステートの初期化・更新をしよう

React
2022/3/1
目次

useStateとは

useStateとはReactの関数コンポーネントにおいて、ステート（状態）を保持したり、変更したりすることができる機能です。

ステート（状態）とは、アプリケーションにおいて追跡する必要のあるデータまたはプロパティのことを表します

SPA（シングルページアプリケーション）では、ステートの内容を変更することで、画面の描画を変えたりすることができます。

useStateをimportする

ReactのuseStateを使用するには、まずコンポーネントにuseStateをインポートする必要があります。

import { useState } from "react";

コンポーネントの上部に、このように記述することでuseStateがインポートできます。

useStateでステートを初期化する方法

関数コンポーネントでuseStateを呼び出すことで、ステートの初期化が可能です。構文は以下の通りです。

const [値1, 値2] = useState(初期値)

また、useStateでステートを初期化した際、以下の2つの戻り値が返ります。

  • 1つ目の値：現在のステート
  • 2つ目の値：ステートを更新するための関数

以下はuseStateを使用して、ステートを初期化するコード例です。

import { useState } from "react";

function App() {
  const [name, setName] = useState("");
}

上記のコードだとuseStateの結果、nameにはステートの初期値である空文字（””）が返り、setNameにはnameの値を更新するための関数が返ります。

ちなみにこの場合、好きな定数名（変数名）を付けられますが、2番目の値は「set〇〇」とすることが通例となっています。

ステートの値を使用する方法

ReactのJSX内でステートの値を利用する方法は非常に簡単です。

JSXの中で波かっこ{} を記述し、その中でステートの変数を使用するだけです。

import { useState } from "react";

function App() {
  const [name, setName] = useState("田中");

  return (
    <div>私は{name}と申します。</div> // => 私は田中と申します。
  )
}

上記のように書くだけで、nameの箇所において”田中”という文字列を展開することができます。

ステートを更新する方法

ステートを更新するには、useStateの結果返ってきた2つ目のステート更新関数を使用します。逆に言えば、これを使わないとステートを更新することはできません。

例えば、以下のように変数に対して直接上書きしようとしてもステートを更新することはできません。

name = "高橋"

ステートを正常に更新するには、ちゃんと更新用の関数を使用しましょう。

import { useState } from "react";

function App() {
  const [name, setName] = useState("田中");

  return (
    <>
      <div>私の名前は{name}です。</div>
      <button
        onClick={() => setName("高橋")}
      >名前変更</button>
    </>
  )
}

上記のコードだと、ボタンをクリックすることでsetName関数が実行され、nameステートの値が”田中”から”高橋”に更新されます。

プリミティブ型のステートを保持する

useStateは、

  • 文字列
  • 数値
  • 真偽値

といったプリミティブ型の値をステートとして使用することができます。

import { useState } from "react";

function App() {
  const [name, setName] = useState("田中");
  const [age, setAge] = useState(20);
  const [isMale, setIsMale] = useState(true);

  return (
    <>
      <div>私の名前は{name}です。</div>
      <div>私の名前は{age}歳です。</div>
      {isMale ? (<div>私は男です。</div>) : (<div>私は女です。</div>)}
    </>
  )
}

オブジェクトをステートとして保持する

useStateでは、引数にオブジェクトを渡すことで、オブジェクト型のステートを作ることもできます。

import { useState } from "react";

function App() {
  const [person, setPerson] = useState({
    name: "田中",
    age: 20,
    isMale: true
  });

  return (
    <>
      <div>私の名前は{person.name}です。</div>
      <div>私の名前は{person.age}歳です。</div>
      {person.isMale ? (<div>私は男です。</div>) : (<div>私は女です。</div>)}
    </>
  )
}

オブジェクト型のステートの更新方法

オブジェクト型のステートを更新する際、オブジェクトの全てのプロパティを変更したい場合は、更新関数に新しいオブジェクトをセットすれば大丈夫です。

setPerson({
  name: "高橋",
  age: 22,
  isMale: false
})

ですが、オブジェクトのプロパティを部分的に更新したい場合は、スプレッド構文を使用して更新します。

setPerson(prevState => {
  return {...prevStage, 更新するプロパティ: 新しい値}
}

例えば、personオブジェクトのageプロパティだけ更新する場合は以下のようになります。

import { useState } from "react";

function App() {
  const [person, setPerson] = useState({
    name: "田中",
    age: 20,
    isMale: true
  });

  const updateAge = () => {
    setPerson(prevState => {
      return {...prevStage, age: 35}
    }
  }

  return (
    <>
      <div>私の名前は{person.name}です。</div>
      <div>私の名前は{person.age}歳です。</div>
      {person.isMale ? (<div>私は男です。</div>) : (<div>私は女です。</div>)}
       <button
        onClick={updateAge}
      >UpdateAge</button>
    </>
  )
}

タイトルとURLをコピーしました