React

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

React
この記事は約4分で読めます。

対象となる人

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

useEffectとは?

  • ReactのHooksの1つ
  • 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