React Hook React.useEffect has a missing dependency: '~~~'. Either include it or remove the dependency arrayの警告が表示される

概要

本記事では「React Hook React.useEffect has a missing dependency: '~~~'. Either include it or remove the dependency array」の警告を消す方法について解説いたします。

React hook

フックに関する記述はこちらになります。（パフォーマンス最適化）

https://ja.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

依存配列を追加

今回警告の発生している個所のソースコードは以下になります。

// コンポーネントの再レンダリング時に実行
  React.useEffect(() => {
    // タイトルと説明を更新
    document.title = data.title.concat(HomeData().subTitle);
    // シンタックスハイライトを実行
    Prism.highlightAll();
  }, []);

// React Hook React.useEffect has a missing dependency: 'data.title'. Either include it or remove the dependency array

ソースコードを確認するとuseEffect内で使用されている'data.title'の依存関係が明示されていない為に警告が発生しているようです。（dataはuseEffect外で宣言されているオブジェクト）

警告を解除する為には以下のように行7の[ ]（useEffect のオプションの第2引数）にdataを追加することで依存関係を明示化、さらに再レンダーで指定した値が変わっていない場合には副作用の適用をスキップするようReactに伝えることができます。

// コンポーネントの再レンダリング時に実行
  React.useEffect(() => {
    // タイトルと説明を更新
    document.title = data.title.concat(HomeData().subTitle);
    // シンタックスハイライトを実行
    Prism.highlightAll();
+ }, [data]);

上記の様にuseEffectの第2引数にdataを追加することで警告を解除することができます。

補足（警告解除）

推奨されていませんが警告を消したいだけなら以下の様に第2引数の配列を消すだけでも警告を解除することができます。

// コンポーネントの再レンダリング時に実行
  React.useEffect(() => {
    // タイトルと説明を更新
    document.title = data.title.concat(HomeData().subTitle);
    // シンタックスハイライトを実行
    Prism.highlightAll();
+ });

参考文献（上部URL）にもあるように依存するオブジェクトが存在する場合には条件付き（第2引数を指定する）で実行することが望ましいようです。（バグの温床となることを防ぐ必要があります）