React Hooks + TypeScriptによるUseEffect(条件付き)の使い方

はじめに

React Hooks + TypeScriptによる基礎学習の UseEffect(条件付き) のアウトプットになります。
UseEffect の使い方を書き留めます。
前回学習したReact Hooks + TypeScriptによるUseEffectの続きからになります。

React Hooks + TypeScriptによるUseEffectの使い方

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

・[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発

ゴール

同じボタンをクリック、テキストを入力しても、useEffectの設定条件により処理が異なることを確認。

以下のように、ボタンをクリックするとコンソールにクリック数がカウントされ、テキストを入力するとコンソールに入力数がカウントされる。

ボタンをクリックするとクリック数がコンソールにカウントされるが、テキストを入力してもコンソールには反映されない。

学習手順

1. BasicUseEffect.tsxに新しくuseState、input を追加する
2. 動作確認
3. useEffectの第二引数に条件を追加
4. 動作確認

1. BasicUseEffect.tsxに新しく useState、<input> を追加する

---

前回作成した、BasicUseEffect.tsx  に以下の useState と <input> を追加する。

# BasicUseEffect.tsx


import React, {useState, useEffect} from 'react'

const BasicUseEffect = () => {

  const [count, setCount] = useState(0)
  const [item, setItem] = useState('')       //<-- useState関数を追加

  useEffect(() => {
      console.log("useEffect invoked")
  })

  return (
    <div>
        <button onClick={()=> setCount(prevCount=>prevCount+1)}>Click {count}</button>
        <input type='text' value={item} onChange={evt=>setItem(evt.target.value)}/>　　　　//<--　<input> を追加
    </div>
  )
}

export default BasicUseEffect

2. 動作確認

---

localhost:3000 に接続して以下のようにボタンをクリックして、コンソールにカウントされ、テキストを入力して入力数がカウントされれば成功。

3. useEffectの第二引数に条件を追加

---

useEffectの第二引数に ,[count] を追加した。
これで、テキストを入力してもコンソールに入力数が処理されないようになる。

# BasicUseEffect.tsx


import React, {useState, useEffect} from 'react'

const BasicUseEffect = () => {

  const [count, setCount] = useState(0)
  const [item, setItem] = useState('')       

  useEffect(() => {
      console.log("useEffect invoked")
  },[count])                  //<-- ,[count]を追加 

  return (
    <div>
        <button onClick={()=> setCount(prevCount=>prevCount+1)}>Click {count}</button>
        <input type='text' value={item} onChange={evt=>setItem(evt.target.value)}/>　　　　
    </div>
  )
}

export default BasicUseEffect

4. 動作確認

---

再度確認、useEffect の第二引数を追加したのでボタンをクリックしてもコンソールの処理は変わらないが、テキストを入力してもコンソールでは処理がされてないことが確認できる。

おわりに

useEffect(条件付き)の学習でした。
次回はuseEffect(Cleanup)についてです。