【React】useStateの使い方！初心者向けに分かりやすく解説！

2022年6月30日2023年2月18日

ReactでuseStateを使ってみたいんだけど、どうやって使うの？

useStateはReactでよく使うフックだから詳しく解説していくね！

Hookとは？

Hook（フック）とはReact 16.8のバージョンで新しくで追加された機能です。

Hookは関数コンポーネントで使うことができる機能で、クラスを書かなくてもstateなどの機能を使えるようになります。

useStateはHookの1つの機能です。

React Hook 関連記事

【React】useContextの使い方！初心者向けに分かりやすく解説！

【React】useEffectの使い方！初心者向けに分かりやすく解説！

【React】useRefの使い方！初心者向けに分かりやすく解説！

コンポーネントについてはこちら

【React】コンポーネントの基本と使い方を初心者向けに解説！

useStateとは？

「useState」は関数コンポーネントでstateを管理（状態管理）するためのフックです。

関数コンポーネントでは頻繁に使われるフックです。

stateとはコンポーネントが内部で保持する「状態」のことです。

useStateを使うことでコンポーネントの中で「状態」を管理することができます。
これは変数のようなもので、あるデータを保持しておきたいときに使います。

propsは変更できませんがstateは後から変更することができます。

useStateの使い方

まずはuseStateの機能をインポートします。
インポートしなくても使えますが、今回はインポートをして使っていきます。

import React, { useState } from 'react';

インポートしない場合は、useState()をReact.useState()と書きます。

インポートができたらuseStateを使うことができるようになります。

少し独特な記述ですが、useStateを使うときの記述になります。
countが変数でsetCountが変数の値を変える関数になります。初期値も設定できます。

// const [状態を入れる変数, 状態を変更する関数] = useState(状態の初期値);
const [count, setCount] = useState(0);

count変数はJSXの中でこのように呼び出すことができます。

<p>{count}</p>

またsetCountの()に値を入れることで、入れた値がcount変数に反映されます。

setCount(10);

useStateを使った全体的なコードの例になります。

import React, { useState } from 'react';

export const Count = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>

      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

onClickで呼び出している処理は関数にして、それを呼び出すこともできます。


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

const plus = () => { setCount(count + 1) }
const minus = () => { setCount(count - 1) }

return (
  <div>
    ...
    <button onClick={plus}>+</button>
    <button onClick={minus}>-</button>
  </div>
);

同じ関数の中でsetCountで値を変更して、count変数の中を見ても値は変わりません。

これはReactのレンダリングが影響しています。

setCountで値が更新されるのは関数が呼び出された後なので注意しましょう。

const plus = () => {
  setCount(count + 1); // countに0が入っているとき
  console.log(count);  // ログで表示してもこの段階ではcountはまだ0である
}

レンダリングのタイミングで内容が変わってくるから注意してね！

Booleanの値を管理するとき

stateはbooleanの状態管理もできます。表示切り替えなどbooleanを使うことがよくあります。

stateの状態を変更するときbooleanを直接指定しても良いですが、!を使うことで反転して保存することができます。

import React, { useState } from 'react';

export const Open = () => {
  const [open, setOpen] = useState(false);

  const changeOpen = () => {
    setOpen(!open);
  };

  return (
    <div>
      <p>開閉状態: {open? '開く' : '閉じる'}</p>

      <button onClick={changeOpen}>{open ? '閉じる' : '開く'}</button>
    </div>
  );
}

配列の値を管理するとき

配列の値を追加・変更・削除するときは少しテクニックが必要です。

追加

追加するときはスプレッド構文を使います。

スプレッド構文で配列を展開した後に、追加する値を指定します。

const [colors, setColors] = useState(['白', '黒', '赤']);

const addColor = () => {
  setColors([...colors, '青']);
};

// colors: ['白', '黒', '赤', '青']

追加する位置が分かっているのであればspliceメソッドを使うこともできます。

const [colors, setColors] = useState(['白', '黒', '赤']);

colors.splice(3, 0, '青'); // 3番目から0個の要素を削除して「青」を追加する

// colors: ['白', '黒', '赤', '青']

変更

変更するときはmapを使い、変更された配列に作り直します。

const [colors, setColors] = useState(['白', '黒', '赤']);

const updateColor = () => {
  setState(
    colors.map((value) => (value === '黒' ? '青' : value))
  );
};

// colors: ['白', '青', '赤']

配列の値ではなく、indexで比較しても同じく変更ができます。

const [colors, setColors] = useState(['白', '黒', '赤']);

colors.map((value, index) => (index === 1 ? '青' : value));

// colors: ['白',　'青', '赤']

こちらも変更する位置が分かっていればspliceメソッドを使えます。

const [colors, setColors] = useState(['白', '黒', '赤']);

colors.splice(2, 1, '赤'); // 2番目から1個の要素を削除して「青」に変更する

// colors: ['白', '青', '赤']

削除

削除するときはfilterを使って削除対象を除外した配列に作り直します。

const [colors, setColors] = useState(['白', '黒', '赤']);

const deleteColor = () => {
  setState(
    colors.filter((value) => (value !== '黒'))
  );
};

// colors: ['白', '赤']

こちらも削除する位置が分かっていればspliceメソッドを使えます。

const [colors, setColors] = useState(['白', '黒', '赤']);

colors.splice(2, 1); // 2番目から1個の要素を削除する

// colors: ['白', '赤']

オブジェクトの値を管理するとき

オブジェクトの値を追加・変更・削除するときも配列と同じような方式で操作をしていきます。

追加

追加するときはスプレッド構文でオブジェクトを展開した後に、追加する値を指定します。

const [colors, setColors] = useState({ white: '白', black: '黒', red: '赤' });

const addColor = () => {
  setColors({ ...colors, blue: '青' });
};

// colors: { white: '白', black: '黒', red: '赤', blue: '青' }

変更

変更すときはスプレッド構文で展開した後に、変更するキー指定して変更する値を指定します。

既にキーがあるときは値を上書きします。

const [colors, setColors] = useState({ white: '白', black: '黒', red: '赤' });

const updateColor = () => {
  setState(
    setColors({ ...colors, red: '紅' })
  );
};

// colors: { white: '白', black: '黒', red: '紅' }

削除

削除するときはオブジェクトをコピーして、それに対してdelete演算子で削除します。

delete演算子はオブジェクトそのものに変更を加えてしまうのでコピーしてから使います。

const [colors, setColors] = useState({ white: '白', black: '黒', red: '赤' });

const updateColor = () => {
  const copyColors = { ...colors };
  delete copyColors['black'];

  setState(copyColors);
};

// colors: { white: '白', red: '赤' }

スプレッド構文の使い方についてはこちらで詳しく解説しているよ！

詳しくはこちら