はじめに

React Hooks + TypeScriptによるUseStateの基礎学習（2）のアウトプットになります。
前回学習したReact Hooks + TypeScriptによるUseStateの基礎学習（1）の続きからになります。

React Hooks + TypeScriptによるUseStateの基礎学習（1）

学習に使用した教材・参考資料

ゴール

以下の映像のようにボタンをクリックすると数字が2づつ増えていきます。

学習手順

1. useStateの注意点

2. prevCountの作成

3. 動作確認

1. useStateの注意点

以下の<button>に記述されているonClick内の関数は複数記述することができるが注意が必要です。
同じsetCount(count+1)関数を２つ作成すれば、ボタンをクリックすると2づつ増えると思えるが、実際には1づつ増えていき挙動は変わりません。

# Hello1.tsx
# 変更前

import React, {useState} from 'react';

type Props = {
  text: string
}

const Hello1 = (props:Props) => {
  const clickHandler = () => {
      console.log('clicked')
  }

  const [count, setCount] = useState(0)

  return <div>
            <button onClick={() => {setCount(count+1); setCount(count+1);} }>Count {count}</button>    //<-- setCount(count+1)を２つ作成
            <h1>Hello {props.text} </h1>
            <h1>Hello World2</h1>
         </div>;
};

export default Hello1;

2. prevCountの作成

クリック毎に2づつ増える、意図した挙動にするにはsetCount関数にアロー関数とprevCountを作成する。
そうするとボタンをクリックする度に２づつ増えていきます。
前回の値に対して1を足す処理になります。

# Hello1.tsx
# 変更後

import React, {useState} from 'react';

type Props = {
  text: string
}

const Hello1 = (props:Props) => {
  const clickHandler = () => {
      console.log('clicked')
  }

  const [count, setCount] = useState(0)

  return <div>
            <button onClick={() => {setCount(prevCount=>prevCount+1); setCount(prevCount=>prevCount+1);} }>Count {count}</button>    //<-- setCount(prevCount=>prevCount+1)を２つ作成
            <h1>Hello {props.text} </h1>
            <h1>Hello World2</h1>
         </div>;
};

export default Hello1;

3. 動作確認

localhost:3000に接続して動作確認をして以下のようにボタンをクリックして2づつ増えていけば成功です。

おわりに

useStateにおけるsetCountの注意点を学習しました。
次回はuseState(object)です。