【React初心者向け】useStateの使い方

Reactは、ユーザーインターフェイスを構築するための人気のあるJavaScriptライブラリです。最近のReactのバージョンでは、関数コンポーネントで状態を管理するためのuseStateフックが導入され、これによりコンポーネント内で簡単に状態を扱うことができるようになりました。この記事では、useStateフックの基本的な使い方から応用的なテクニックまでを解説します。

useStateフックとは？

useStateフックは、関数コンポーネント内で状態を管理するためのReactのフックです。クラスコンポーネントのsetStateに相当する機能を提供し、コンポーネント内で状態の値を保持し、更新することができます。useStateを使用することで、コンポーネントが再レンダリングされ、最新の状態が表示されるようになります。

useStateフックのインポート

まずuseStateフックをReactからインポートします。

import React, { useState } from 'react';

状態の宣言と初期化

const [count, setCount] = useState(0);

useStateフックを使用して、状態を宣言し、初期値を設定します。

import React, { useState } from 'react';

function Example() {
  // countという状態を定義し、setCountを使ってその状態を更新する関数を取得する
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}回クリックしました</p>
      {/* クリックされるとcountを1増やす */}
      <button onClick={() => setCount(count + 1)}>
        クリック
      </button>
    </div>
  );
}

export default Example;

上記のコードではuseStateを使って'count'という状態を定義し、その初期値を0に設定しています。そして、setCountを使って状態を更新する関数を取得しています。ボタンがクリックされると、setCountを呼び出してcountの値を1増やしています。

状態の更新

useStateフックで状態を更新する際、新しい状態を直接指定するのではなく、更新関数を使って更新します。これにより、以前の状態に基づいて新しい状態を計算できます。

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}クリックしました</p>
      {/* countを2倍にする */}
      <button onClick={() => setCount(prevCount => prevCount * 2)}>
        クリック
      </button>
    </div>
  );
}

export default Example;

上記の例では、setCountの引数として、前の状態(prevCount)に基づいて新しい状態を計算する関数を渡しています。これにより、現在の状態からの更新が安全に行われます。

まとめ

今回は、ReactのuseStateについて基本的な使い方を紹介しました。

useStateは、Reactコンポーネント内で状態を管理するためのツールです。

useStateフックを活用することで大きなリファクタリングをすることなく、少量のコードで状態管理が簡単になります。