ReactのuseStateフックについて

useStateは、Reactの中でも最も基本的でありながら強力なフックの一つです。コンポーネントの状態管理をシンプルに行うために使用されます。このフックを理解することは、React開発の基礎を築く上で非常に重要です。

概要

以下に、useStateを使った簡単なカウンターアプリの例を示します。

import React, { useState } from "react"

const App = () => {
  // count: 現在の状態、setCount: 状態を更新するための関数
  const [count, setCount] = useState(0)

  return (
    <>
      <button onClick={() => setCount((prev) => prev + 1)}>
        Count: {count}
      </button>
    </>
  )
}

export default App

このコードでは、useStateを使ってボタンをクリックするたびにカウントが増加するシンプルなカウンターを実装しています。

useStateとは？

useStateは、関数コンポーネントで状態を管理するためのフックです。状態（state）は、ユーザーインターフェースがインタラクションに応じて動的に変化するための重要な要素です。例えば、ユーザーがフォームに入力した内容や、ボタンのクリック回数などを状態として管理します。

useStateの構文

const [state, setState] = useState(initialState)

• state: 現在の状態の値です。この値は、コンポーネントが再レンダリングされるたびに維持されます。
• setState: 状態を更新するための関数です。この関数を呼び出すと、コンポーネントが再レンダリングされ、新しい状態が反映されます。
• initialState: 状態の初期値です。この値は、コンポーネントが最初にレンダリングされるときにのみ使用されます。

状態の更新と再レンダリング

useStateフックで取得した状態を更新する際は、setState関数を使用します。setStateを呼び出すと、Reactはそのコンポーネントを再レンダリングし、新しい状態を反映したUIが表示されます。この再レンダリングは、効率的に行われるため、必要最小限の更新が行われます。

<button onClick={() => setCount(count + 1)}>Increment</button>

上記のように、setCount関数を使って状態を更新しています。count + 1のように、新しい状態を計算し、その結果をsetCountに渡します。

初期値と遅延初期化

useStateの初期値は数値や文字列、オブジェクトなど任意のデータ型を指定できます。また、初期値の計算にコストがかかる場合、関数を渡すことで遅延初期化することも可能です。

const [expensiveValue, setExpensiveValue] = useState(() =>
  computeExpensiveValue(),
)

このように書くと、computeExpensiveValueは最初のレンダリング時にのみ呼び出され、その結果が初期状態として使用されます。

useStateの制約と注意点

• useStateは、関数コンポーネントの中で直接呼び出す必要があります。ループや条件分岐の中で呼び出すと、予期しない動作が発生する可能性があります。
• 複数の状態を管理する場合、useStateを複数回呼び出すことができます。各状態は独立して管理され、必要な部分だけが再レンダリングされます。

const [name, setName] = useState("")
const [age, setAge] = useState(0)

まとめ

useStateフックは、Reactで状態を管理するための最も基本的なツールです。状態管理はReactコンポーネントの中心的な役割を果たし、ユーザーインターフェースを動的に変化させるために不可欠です。useStateを使いこなすことで、より複雑でインタラクティブなアプリケーションを構築することが可能になります。