【React】UseEffectの使い方を初心者向けにご紹介。

TypeScript

2022.04.10

今回の記事はReactを扱う上で避けては通れないUseEffectの使い方を初心者でもわかるように図などを用いつつご紹介していきます。React初学者でUseEffectの使い方がわからない方やReactHooksに関して調べている方などは是非参考にして見てください。

UseEffectの役割
UseEffectの使い方

UseEffectの役割

UseEffectは画面で値が変わった際のその変更を検出するために頻出のReactHooksの1つです。

例えば画面が初めてレンダリング（表示・描写）されたタイミングや、画面内項目や裏で持っているフラグなどの変更を検出し、それに合った処理を行うことができます。

上記の例では上の吹き出しの処理は画面が表示された始めしか実行されませんが、下の吹き出しに関しては数値が変更される都度実行されます。

ではこの便利なUseEffectに関して実装を交えてさらに解説していきます。

UseEffectの使い方

プロジェクト内の「src/App.tsx」を下記のように変更します。

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {

  // ボタン押下された際のカウントState
  const [clickCount,setClickCount] = useState<number>(0);

  // ボタン押下アクション
  const onAddClickCount = () => {
    setClickCount(clickCount + 1);
  }

  // 引数なしのUeEffect
  useEffect(() => {
    console.log('画面が開かれたタイミング')
  },[])

  // 引数ありのUseEffect
  useEffect(() => {
    console.log(`${clickCount}回クリックされました。`)
  },[clickCount])

  return (
    <div className="App" >
      <button onClick={onAddClickCount}>ボタン</button>
    </div>
  );
}

export default App;

これでbuildすると下記ボタンだけの画面が表示されます。

ボタンを押下するとコンソールでクリックされた回数が出力されるというものです。

画面が初めて呼ばれた際のコンソール。

ボタンをクリックすると「◯回クリックされました。」が更新されていきます。

実装を少し解説をしていきます。

画面初回レンダリング時を検出するのが下記部分です。

// 引数なしのUeEffect
  useEffect(() => {
    console.log('画面が開かれたタイミング')
  },[])

第2引数の「[]」内に何も入れない場合、画面初回レンダリング時を検出することができます。

次に第2引数を入れた場合を解説します。

こちらはUseStateという画面上の項目の変更を保存する変数のようなものを使っての実装となっております。UseStateが何かわからない方は下記記事で紹介しているので確認して見てください。

「【React】UseStateの使い方を初心者向けにご紹介。」

UseStateもUseEffect同様に非常によく使うHooksですので確実に押さえておきましょう。

長くなりましたが、下記が第2引数に値を入れた場合の実装箇所です。

// 引数ありのUseEffect
  useEffect(() => {
    console.log(`${clickCount}回クリックされました。`)
  },[clickCount])

この記述では「clickCount（State）」の値が変わった際にこのUseEffect内の処理が実行されるという流れとなっています。

では今回の記事は以上です。Reactには他にも便利なReactHooksが存在うるのでUseState含めて下記記事など参考にして見てください。

「【React】ReactHooksとは？〜 ReactHooks一覧〜」