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

2022年2月28日 15:16

はじめに

React Hooks + TypeScriptによる基礎学習の UseEffect のアウトプットになります。
UseEffect の使い方を書き留めます。
前回学習したReact Hooks + TypeScriptによるUseStateの基礎学習（配列）の続きからになります。

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

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

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

useeffect とは

コンポーネントが読み込まれた時に最初の１回だけ実行したい場合や、あるステートが変化した際に処理を実行したい場合に使われることが多い
APIのバックエンドで連携している場合で、コンポーネントを立ち上げた時に、あるデータを一括でGETリクエストで取得したりするときに使われる

ゴール

以下のようにボタンをクリックしてボタンにカウントが表示されることは同じだけど、コンソールで受け取る処理が異なる。

クリックする度にコンソールでもカウントされ、"useEffect invoked" も表示されている、2〜10までクリックした。

クリックしても "useEffect invoked" だけ1回実行されているが、それ以降はカウントされない、

学習手順

1. componetsフォルダにBasicUseEffect.tsxを作成してテンプレートを作る2. App.tsxに関数をインポートする
3. 動作確認
4. useEffectの第二引数を追加
5. 動作確認

ファイル構造

# react-ts-app

src
├── App.css
├── App.test.tsx
├── App.tsx               <-- 内容変更
├── components
│   ├── Hello1.tsx
│   ├── Hello2.tsx
│   └── BasicUseEffect.tsx      <-- ファイル作成
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

1. componetsディレクトリにBasicUseEffect.tsxを作成してテンプレートを作る

componentsディレクトリにBasicUseEffect.tsxを作成して、以下のように useState と useEffect をインポートし関数を定義する。
useStateとbutton の解説は省略する。
useEffect関数を定義してボタンをクリックしてコンソールに"useEffect invoked"と表示させる。

BasicUseEffect.tsx

# BasicUseEffect.tsx


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

const BasicUseEffect = () => {

  const [count, setCount] = useState(0)

  useEffect(() => {　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<-- useEffect関数を定義してコンソールに"useEffect invoked"と表示
      console.log("useEffect invoked")
  })

  return (
    <div>
        <button onClick={()=> setCount(prevCount=>prevCount+1)}>Click {count}</button>
    </div>
  )
}

export default BasicUseEffect

2. App.tsx

関数をインポートして、ブラウザに描画させる為の <BasicUseEffect /> を追加する。
使用しない場所はエラーがでるのでコメントアウトしておく

# App.tsx


import React from 'react';
import logo from './logo.svg';
import './App.css';
// import Hello2 from './components/Hello2';         <-- コメントアウト        
import BasicUseEffect from './components/BasicUseEffect';　　　　<-- 関数をインポート



function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* <Hello2  /> */}　　　　　　　　　　　<-- コメントアウト
        <BasicUseEffect />　　　　　　　　　　　　　<-- コード追加
      </header>
    </div>
  );
}

export default App;

3. 動作確認

localhost:3000にアクセスして動作確認をする、以下のようにボタンをクリックして、コンソールにカウントが確認できれば問題なし。

4. useEffectの第二引数を追加

BasicUseEffect.tsxの useEffect関数の第二引数に [] を追加して、再度動作確認をする。

# BasicUseEffect.tsx


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

const BasicUseEffect = () => {

  const [count, setCount] = useState(0)

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

  return (
    <div>
        <button onClick={()=> setCount(prevCount=>prevCount+1)}>Click {count}</button>
    </div>
  )
}

export default BasicUseEffect

5. 動作確認

再度クリックしてコンソールを確認する。
コンソールに"useEffect invoked"は表示されるがカウントされていない、最初の一回のクリックだけが有効になっている状態。

おわりに

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