1. useEffectとは？

useEffect は、Reactで「副作用」を扱うためのHookです。「副作用」とは、データの取得やタイマーのセット、DOMの操作など、画面の描画以外の作業を指します。例えば、ページを開いたときに自動でAPIからデータを取得する場合に使います。 副作用は画面描画速度すなわちUIに影響するため適切に制御する必要があります。

2. useEffectの基本構文

useEffectの基本的な構文は以下です。

useEffect(() => {
	// 処理   
},[依存変数])

• 依存変数: 副作用の発生タイミング指示
  • 依存変数が変わるたびに、処理が実行されます。
  • 依存変数が[]の場合は、最初にページに遷移した際に処理が実行されます。
  • 依存配列自体がない場合は、毎回のレンダリングで実行され不要な再描画が発生します。(要注意)

3. サンプルコード

サンプルコードとして以下のカウンターアプリを実装します。

import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`現在のカウントは${count}です`);
  }, [count]);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

【解説】

• ボタンカウントアップによるcountの変化はuseStateの記事参照
• ここではカウントアップがクリックされる際(countの値が変更される)
  • console.logで現在のカウントを出力します。
  • プレビューの右上アイコンの「Chrome Dev Tools for The preview」

実際の画面については、以下のプレビュー参照

もしプレビューが表示されていない場合は以下の手順で表示

コマンドパレットを開く(mac: Shift+command+P, win: Shift+Ctl+P) > 「Open Preview」と入力 > 「CodeSandBox: Open Preview」を選択