hooks時代のreact 〜useState編〜

React
2020.09.11
react16.8以降、関数コンポーネントでもクラスコンポーネントでも実現出来た、ステート管理、ライフサイクル管理がhooksを使用する事で可能となりました。 本記事はその中でもuseStateについて紹介したいと思います。 useStateを用いる事で、任意のコンポーネントで、状態を持つことが出来ます。 ただの関数なので、試験も容易になります。 それではuseStateの使い方を見ていきましょう。

useStateの使い方

useStateでのstateの更新方法は2種類あります。 一つは指定の値を設定する方法。 もう一つは現在のStateをもとに新しいStateを設定する方法です。 
import React, { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const addCount = () => {
    setCount((prev) => prev + 1); // 今のstateをもとに次のstateに更新する方法
  };

  const resetCount = () => {
    setCount(0);  // 固定の値でstateを更新する方法
  };
  return (
    <div className="App">
      Count: {count}
      <p>
        <button onClick={addCount}>+1</button>
      </p>
      <p>
        <button onClick={resetCount}>reset</button>
      </p>
    </div>
  );
};
注意すべきは(prev) => prev + 1の形式です。 これをcount + 1にすると大体はうまくいくのですが、reactではrenderはある程度まとめてrenderするため、うまく更新できない場合があるので注意です。

コメント