React.jsの副作用フックの第2引数と実行タイミングの関連を理解する

Goal

副作用フック useEffect の第2引数の指定の違いで、実行タイミングがどのように変わるのかを理解します。

References

本文の手順は、次の文書を参考に作成しました。

• 副作用フックの利用法. Facebook Inc. Retrieved December 11, 2021.

Report

結論は、副作用フックの実行タイミングは、第2引数の指定の違いで、次の表の通りに変わります。

第2引数	メイン処理	クリーンアップ処理
なし	コンポーネントの初回を含む毎回のレンダリング終了後に実行される。	副作用フックの次回のメイン処理実行前、もしくはコンポーネントのアンマウント時に実行される。
空の配列（[]）	コンポーネントの初回のレンダリング終了後に実行される。	同上。
変数配列（[x ...]）	配列に指定した変数に変更があった場合、コンポーネントの初回を含む毎回のレンダリング終了後に実行される。	同上。

調査は、次のソースコードを使用し、副作用フックの第2引数の指定の違いで、コンソールログの出力がどのように変わるのかを観察しました。

import React, { useState, useEffect } from 'react';
import './App.css';

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

  useEffect(() => {
    console.log('App.effect.invoke');
    return () => {
      console.log('App.effect.cleanup');
    };
  });

  return (
    <div>
      count: {count} <button onClick={() => setCount(count + 1)}>count up</button>
    </div>
  );
};

export default App;