【React】useStateの使い方・どんな時に使うのか？ stateとpropsの違いは？

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、ReactのHooksである useStateの使い方や、考え方・メリットについて解説していきます。

1 useStateとは？
2 useStateの使い方
3 useStateはどんな時に使うのか？
4 stateとpropsの違いは？
5 Twitterやってます！Follow Me！
6 React関連の書籍
7 プログラミング学習・エンジニア転職関連の情報
8 参考・引用
9 最近の投稿

useStateとは？

useStateは、state(状態)を「管理」( state の保持と更新)するためのReact-Hookです。

useStateでは、state を定義・保持するだけでなく、変更するための更新機能も持っています。

これにより、関数コンポーネント内で、state を保持することができ、さらに更新もできます。

ちなみに、state とはコンポーネントが内部で保持する「状態」のことで、

画面上に表示されるデータ等、アプリケーションが保持している「状態」を指しています。

その状態は、データである state の値 (状態)によって変化します。

useStateの使い方

useState の構文は、次のとおりです。

useStateの構文

const [ 現在のstateの値, state更新関数 ] = useState( state初期値 );

ポイントを列挙すると、次のようになります。

「現在のstateの値」は、まずは「state初期値」を代入している。
「state更新関数」の引数が、「現在のstateの値」としてSet(更新)される。
「現在のstateの値」は「state更新関数」でのみ、変更可能です。
- 更新関数以外での直接変更はNG！
- コピーして加工したものを最終的に更新関数の引数に渡して間接的に変更する。

useState は現在の state の値と、それを更新するための関数をペアにして返します。

useState は「動的に値を変化」させられるようにするための状態管理の機能がポイントです。

次のSampleCodeでは、状態管理されている値である state が、画面に出力されていて、

ボタンClickによって、state に変更があれば画面に即時反映されます。

import * as React from 'react';

const { useState } = React;

// 1. 関数コンポーネント
export const UseStateSample = () => {
  
  // 2. const [ 現在のstateの値, state更新関数 ] = useState( state初期値 ); 
  const [count, setCount] = useState(0);

  return (
   <div>
    <h1>useState-Sample</h1>
    <p>
      <button onClick={() => setCount(count - 1)}> - </button>

      {/* 3. 状態管理されている値が、画面に出力される => 変更があれば、画面に即時反映される */}
      <b>{count}</b>
      <button onClick={() => setCount(count + 1)}> + </button>
    </p>
   </div>
  );
};