useStateについて

2024.06.11

useStateの公式ドキュメントを読み、自分なりにまとめておきます。
また、実際にサイト構築する際にも使用したのでその時のコードを例に理解を深めたいと思います。

useStateとは

useStateとは、コンポーネントにstate変数を追加するためのReactフックになります。
状態管理を行うことができ、非常に使用頻度の高いフックになります。

基本の形

const [state, setState] = useState(initialState)

stateが状態変数で、setStateが更新関数になります。

状態変数
- 現在の値を保持する
更新関数
- インタラクション(inputのチェンジイベントetc)に応じて、新しい値を受け取り現在の値を更新する

実際に使ってみた

実際にサイト構築を「Next.js×WordPress」で行った時に、useStateを使う場面がありました。

シンプルなトグルですね。今回は下記のように実装しました。

import { useState } from 'react';

export default function ToggleMenuExample() {
  // useStateを使用して、showMenu状態（boolean）を管理します。
  const [showMenu, setShowMenu] = useState(false)

  return (
    <div className='menu-container'>
      <button onClick={() => setShowMenu(!showMenu)}>
        <Image src='icon.svg' />
      </button>
      {showMenu && <Menu />}
    </div>
  );
}

useState(false)によってshowMenuが初期値falseで設定されています。setShowMenuはこの状態を更新する関数です。ボタンがクリックされると、setShowMenu関数が呼ばれ、showMenuの値がトグルされます（true⇔false）。この状態によって、メニューが表示されるか隠されるかが決まります。