（初心者向け）useEffectについてざっくり理解する

対象となる人

• Reactを最近始めた
• useEffectとかいうものがあるという噂を聞いた
• とりあえずよくわからんからどんな機能なのかざっくり知りたい

useEffectとは？

• ReactのHooksの１つ
• 2つの引数を持つ
• 第二引数の値が更新された時に第一引数の処理を実行する

ポイント

• useEffectの第一引数　→　実行したい関数とか処理
• useEffectの第二引数　→　実行したいタイミング
• 実行したいタイミングに空配列を指定すると　→　コンポーネントがマウント(要素としてhtmlに追加)された時に実行される
• 実行したいタイミングに値を指定すると　→　その値が更新されたときに実行される(一般的に、stateやpropsを指定する。こうすることで、あるstateやpropsが更新されたときのみ実行するということができる)

どんな形で使うの？

とりあえず見てみましょう

example.js

// 第一引数にconsole出力
// 第二引数にvalueを指定している
useEffect(() => {
  console.log("こんにちは！")
}, [value])

これにより、valueという値が更新された時に、consoleが出力されます。

軽く実践

簡単なカウントアプリでuseEffectを実行してみます
styleはご自由に調整してOKです

example.js

import React from "react";
import { useState } from "react";

const example = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p className="count">{count}</p>
      <div>
        <button className="btn" onClick={() => setCount(count + 1)}>
          +1
        </button>
        <button className="btn" onClick={() => setCount(count - 1)}>
          -1
        </button>
      </div>
    </div>
  );
};

export default example

こんな感じの画面を作ってみました
ボタンを押すと真ん中の数字が変わるはずです

useEffectを挿入してcountというstateが更新された時にconsoleが出てくるようにしましょう

example.js

import React from "react";
// useEffectを追加でimport
import { useState, useEffect } from "react";

const example = () => {
  const [count, setCount] = useState(0);

  // countが更新された時にconsoleを出力
  useEffect(() => {
    count === 0 ? console.log("0だぜ") : console.log("0以外だぜ");
  }, [count]);

  return (
    <div>
      <p className="count">{count}</p>
      <div>
        <button className="btn" onClick={() => setCount(count + 1)}>
          +1
        </button>
        <button className="btn" onClick={() => setCount(count - 1)}>
          -1
        </button>
      </div>
    </div>
  );
};

export default example

countが0の時→0だぜ
countが0以外の時→0以外だぜ
という文字列がconsoleに出力されるはずです

まとめ

• 第一引数には実行したい関数や処理
• 第二引数には実行したいタイミング（stateやpropsを指定するのが一般的）
• 第二引数が更新されたら第一引数の処理を実行する

参考記事

https://qiita.com/k-penguin-sato/items/9373d87c57da3b74a9e6
https://qiita.com/keiya01/items/fc5c725fed1ec53c24c5