おにちゃん塾の商品一覧*準備中

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

【useEffect編】React hooksをイチから理解しよう
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • useEffectとは何か
  • useEffectの使い方

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

おにちゃん

useEffectはfirebaseとの連携で多用しますので、早いうちに覚えておきましょう。


2021年5月20日執筆

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

本記事の概要

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

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

おにちゃん

理解していない方は、本記事の前提知識として必要ですので、必ず読むようにしてください。

(スポンサーリンク)

目次

useEffectとは

useEffectとは
useEffectとは

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

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


useEffectのメリット

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

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

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


Reactの副作用とは

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

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

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

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


useEffectの基本的な使い方

useEffectの基本的な使い方
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の使い方
まとめ:useEffectの使い方

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

おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。

本格的にReactを学びたい方はおにちゃん塾or動画教材をおすすめしています。


読者におすすめの記事


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

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる