💼

useStateとは

2023/10/24に公開

JavaScript

React

useState

tech

useStateとはcomponent を管理して、変更できるようにしてくれる React hook。
初期入力値を保存して該当状態をアップデートしてくれます。

import React, { useState } from "react"

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

  function incrementCount() {
    setCount(count + 1)
    setCount(count + 1)
  }
                                                                                                                                                                                                                                                                             
  return (
    <>
      <span>{count}</span>
      <button onClick={incrementCount}>+</button>
    </>
  )
}

export default App

上記のコードでcountのステータス値は2ずつ増加しますか

NO!!

Reactは不要なリーレンダリングを減らすために色々なアップデート関数を一回で処理します。この時同一なアップデート関数が存在するときは後で使ったアップデート関数を変更します。

もし一つのブロックの中でアップデート関数が何回も使わないとダメな時は以下のようにかけます。

import React, { useState } from "react";

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

  function incrementCount() {
    setCount((count) => count + 1);
    setCount((count) => count + 1);
  }

  return (
    <>
      <span>{count}</span>
      <button onClick={incrementCount}>+</button>
    </>
  );
}

export default App;

最近は関数形で使われていることが多いが、関数形前はクラス形で使われていました。

Discussion