leaning diary Rails

【Learning Diary34】React・useStateを理解する

15/11/2023

【Learning Diary34】React・useStateを理解する

useState について

useStateは、ReactのHooksの一つであり、関数コンポーネント内で状態を管理するために使用されます。

 

これにより、クラスコンポーネントにおけるthis.stateとthis.setStateのような状態管理の機能を、関数コンポーネントでも利用できるようになります。

 

useStateの基本的な使用方法は以下の通りです。

 

import React, { useState } from 'react';

function ExampleComponent() {
  // useStateの呼び出しでstate変数とその更新関数が返される
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* クリック時にsetCountを呼び出してcountを更新 */}
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

この例では、useState(0)は初期値が0の状態変数countと、その状態変数を更新するための関数setCountを返します。

 

setCountは新しい値を引数として受け取り、状態変数を更新します。

 

このようにして関数コンポーネント内で状態を管理できます。

 

useStateの注意点と使い方についていくつかポイントがあります。

 

初期値の設定

useStateの引数には状態の初期値を指定します。

 

この初期値は初回のレンダリング時に一度だけ評価されます。

 

#jsx

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

 

複数の状態変数

複数の状態変数を使用する場合、複数のuseState呼び出しを行います。

 

const [count, setCount] = useState(0);
const [name, setName] = useState('John');

 

状態の非同期更新

状態の更新関数は非同期であり、現在の状態値を元に新しい状態を計算する場合には注意が必要です。

 

関数の引数として直前の状態を受け取り、それに基づいて新しい状態を返すようにすると、安全に更新できます。

 

setCount(prevCount => prevCount + 1);

関数コンポーネント内での複雑な状態

オブジェクトや配列などの複雑な状態を管理する場合、useStateを複数回使用するか、useStateの引数に関数を渡して初期化ロジックを記述します。

 

const [state, setState] = useState({ count: 0, name: 'John' });

 

これらのポイントに留意することで、useStateを効果的に利用してReactコンポーネントの状態を管理することができるようです。

 

-leaning diary, Rails