【useEffect編】React hooksをイチから理解しよう

本記事は上記の悩みを解決したい方向けに執筆しています。

2021年5月20日執筆

本記事は常に最新の情報を掲載しております。

本記事の概要

本記事ではuseEffectの使い方について詳しく解説しています。

useEffectの前に『Reactのライフサイクル』をしっかり理解していますか。

あわせて読みたい

【設計】Reactのライフサイクルメソッドを分かりやすく解説 本記事の想定読者 Reactの土台となるライフサイクルメソッドを完璧にマスターしたいuseEffectを扱えるようになるためのReactのライフサイクルメソッドをマスターしたい ...

useEffectとは

React componentの時に使用していたマウント→アップデート→アンマウントの処理を一まとめにしたものと言えます。

• マウント：コンポーネントがユーザーにレンダリングされるまでの時間
• アップデート：コンポーネントがユーザーに表示されている＋ユーザーが何かしらのアクションを起こした時間
• アンマウント：他のコンポーネントに切り替えている前に現在表示されているコンポーネントを破棄するための時間

useEffectのメリット

個人的な意見ですが、useEffectは下記のメリットがあると思っています。

• React componentのライフサイクルメソッドの代替になる
• 関数コンポーネントでライフサイクルを実装できる
• まとめやすい

かなり記述量を減らすことができます

Reactの副作用とは

Reactにおける副作用は下記のものがあります。

• クリーンアップコードを
• 必要とする関数
• 必要としない関数

必要としない副作用には、リクエストの送信、手動でのDOM変更、ログの記録などがあります。
これらの副作用はコード実行後に忘れても構わない副作用です。

必要とする副作用には、外部からのデータソースをセットアップするときなどがあります。
この場合は、クリーンアップコードを必要とします

useEffectの基本的な使い方

 useEffect (() => {
    実行したい処理
},[依存変数の配列])

1. useEffectの第一引数には実行したい副作用関数を記述する
2. useEffectの第二引数には副作用関数の実行タイミングを制御する依存変数を記述する

第二引数を活用することで、第一引数に渡される実行タイミングを指定することができます。

第二引数は省略可能ですが、無限ループの温床になりやすいので、ほとんどの場合で記述します。

具体例)useEffectの無限ループ

useEffectの第二引数に何も渡さないコード例をご覧ください。

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

function App(){
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    console.log("click")
  },);

  const handleInput = (e) => {
    setName(() => e.target.value)
  }

  return (
    <div>
      <p>カウント:{count}</p>
      <button onClick={() => setCount(count + 1)}>
        プラスボタン
      </button>
      <button onClick={() => setCount(count - 1)}>
        マイナスボタン
      </button>
      <p>名前:{name}</p>
      <input type="text" value={name} onChange={handleInput}/>
    </div>
  )
}

export default App;

このように、第二引数に何も指定しないと、あらゆるものがレンダーされるためにuseEffectを実行してしまいます。

これを防ぐためにuseEffectの第二引数は必ず指定するor[]を使いましょう。

今回はプラスボタンとマイナスボタンのクリックの時だけ指定してみましょう。

変更ポイントは下記だけです。

useEffect(() => {
    console.log("click")
},[count]);

チェック：第二引数に[]だけ指定すると、useEffectは実行されない

コードを少しだけ変更してください

useEffect(() => {
    console.log(“click”)
},[]);

このように、[]内に依存する変数などを入れないと、useEffectは最初のレンダーの時にしか実行されません。

まとめ：useEffectの使い方

ここまで『【useEffect編】React hooksをイチから理解しよう【完全ガイド付き】』の解説をしてきました。

本格的にReactを学びたい方は当サイトor動画教材をおすすめしています。

読者におすすめの記事

あわせて読みたい

【入門編】React hooksとは｜基礎知識を徹底解説【書籍付き】 本記事の想定読者 React hooksとは何なのかReact hooksの使い方を学習したいReact hooksの学習教材を知りたい 本記事は上記の方に向けて、執筆しています。 2021年5月18...

読者におすすめの動画教材