【React】useStateの使い方 | Webエンジニア「いっしー」のブログ

動画で解説を見る

1 開発環境
2 ReactのuseStateとは
3 useStateの基本構文
4 useStateの使い方
5 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
react:18.2.0
react-dom:18.2.0

ReactのuseStateとは

useStateは、状態を管理するためのReact Hookです。

stateとは、コンポーネントが内部で保持する「状態」のことで、画面上に表示されるデータ等、アプリケーションが保持している状態を指しています。

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

公式ドキュメント：https://ja.react.dev/reference/react/useState

useStateの基本構文

useStateの基本構文は以下の通りです。

const [state, setState] = useState(initialState);

1	const [state, setState] = useState(initialState);

stateは現在の状態の値、setStateは状態を更新するための関数、initialStateは状態の初期値です。

useStateの使い方

useStateの伝い的な使い方を説明していきます。

import './App.css';
import React, { useState } from 'react';

function App() {
  // useStateフックを使用して、状態とその更新関数を宣言します
  const [count, setCount] = useState(0);

  // ボタンをクリックすると、状態を更新する関数を定義します
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>React Hooks Tutorial</h1>
      <hr />
      <h2>useState</h2>
      <p>Count: {count}</p>
      {/* カウンターの値を増やすボタン */}
      <button onClick={increment}>+</button>
      {/* カウンターの値を減らすボタン */}
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default App;

import './App.css';

import React, { useState } from 'react';

function App() {

// useStateフックを使用して、状態とその更新関数を宣言します

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

// ボタンをクリックすると、状態を更新する関数を定義します

const increment = () => {

setCount(count + 1);

};

const decrement = () => {

setCount(count - 1);

};

return (

<div>

<h1>React Hooks Tutorial</h1>

<hr />

<h2>useState</h2>

<p>Count: {count}</p>

{/* カウンターの値を増やすボタン */}

{/* カウンターの値を減らすボタン */}

</div>

);

}

export default App;

countという状態変数を定義し、その初期値を0に設定しています。また、この状態を更新するための関数setCountを取得します。

increment関数は、countの値を1増加させるためにsetCount(count + 1)を実行し、decrement関数は、countの値を1減少させるためにsetCount(count - 1)を実行します。

ボタンのクリックハンドラで+ボタンをクリックすると、increment関数が呼び出されcountが1増加、-ボタンをクリックすると、decrement関数が呼び出され、countが1減少します。

おわりに

ReactのuseStateの使い方について説明してきましたが、いかがだったでしょうか。

今までは状態の管理が大変でしたが、useStateの仕組みが登場したことにより、状態管理がより簡単になり、不要なレンダリングを防ぐことができます。

是非、ReactフックのuseStateを使いこなして、効率的なReactアプリケーションを作成しましょう。