2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

useStateとは

Posted at

useStateとは、ReactのHooksの1つで、関数コンポーネントで状態を管理するためのものです。
状態(state)とは、コンポーネントが内部で保持するデータであり、文字列、数値、真偽値、配列など様々な型の値を保持することができます。

useStateは2つの値をもっており、一つが現在の状態の値を表す変数です。2つ目が状態を更新するための関数です。この関数を呼び出すことで、新しい状態の値をセットすることができます。

例えば以下のように、ボタンをクリックするたびにcountの値が1ずつ増加するというプログラムだった場合はこのように記述します。

import { useState } from 'react';

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

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+1</button>
    </div>
  );
}

ここではuseStateの初期値に0を渡しています。
そして、setCount関数を呼び出すことで、countの変数の値がプラス1されるというものです。またhandleIncrement関数はbuttonが押されてたときに呼び出されます。

このように、useStateを使うことで、状態を管理することができます。
Reactの仮想DOMを使って、実際のDOMと比較して状態の差分を計算し、差分だけページを更新することで、Reactの特徴である動的なUIなどを作成することができます。ですので、useStateを使用しない場合は、このようなReactの特徴を活かすことが難しくなります。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?