useEffect 第二引数のすすめ

#1. はじめに
　アプリで値の更新を行おうと思った際、これまではif文で特定の条件下で値の更新を行うようにコードを書いていました。例えば他の値が変更された時にもう一方の値を更新したい時などは、コンポーネントの再描写前と現在の値を比較し異なるときのみ一方の値の更新を行うようにコードを書いていました。そうすると結構コードの量が増えてしまいますし、何より管理が大変です。
　それがuseEffectを使うとこんなに簡単に書けました。せっかくなので記事にしようと思います。

#2. useEffectの使い方
　まずはインポートの仕方です。こうやって呼び出します。

import { useEffect } from 'react';

　useEffect関数はコンポーネントの中に記述し、第一引数に関数を受け取ります。第一引数に受け取った関数はコンポーネントが描写されるたびに実行されます。
　下記のコードではAppコンポーネントが描写されるタイミングでtextの中身が変わります。もちろん、コンポーネントが再描写される際にもuseEffectの中の関数は実行されます。

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

function App() {
  const [text, setText] = useState("");
  useEffect(() => {
    setText("毎回起動する");
  });
  return <div className="App">{text}</div>;
}

export default App;

　しかし、上記の書き方では描写の度に関数が実行されてしまいます。そこで、useEffectの第一引数の関数を任意のタイミングで実行させたいのですが、それには第二引数を用います。useEffectの第二引数には配列を受け取り、この配列の中身が変化した時とコンポーネントの初回読込時のみ第一引数の関数を実行するようになります。
　コンポーネントの初回読み込み時のみ第一引数の関数を実行させるには第二引数の空の配列を渡します。

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

function App() {
  const [text, setText] = useState("");
  useEffect(() => {
    setText("初回のみ起動する");
  }, []);
  return <div className="App">{text}</div>;
}

export default App;

　任意のタイミング、例えば下記のようにcountの値が変更された時のみtextの値を更新する場合は第二引数の配列にcountを記述します。

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

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");
  useEffect(() => {
    setText("count変更時のみ起動する、count:" + count);
  }, [count]);
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>count++</button>
      {text}
    </div>
  );
}

export default App;

　上記のような使い方をすることで任意のタイミングでtextの中身を更新できます。今回のcountはstateで定義していますが、通常の変数で定義するとコンポーネントの再描写が行われないためうまくいきません。配列の中身はstateで定義するのが無難だと思われます。

#3. おわりに
　いかがだったでしょうか。かなり簡単な使い方にはなりますが、useEffectを使いこなせば強力な武器になると思われます。この記事を読んでる皆さんもこれを機に私と同様に No Code, No UseEffect を掲げましょう。