Reactでコンソール画面に二重に表示されてしまう

はじめに

propsやstateの更新が無いはずなのに、コンソール表示が思っている数の2倍表示されてしまうので、なぜ？と思い調べた結果をまとめます。

問題

デバッグ用にconsole出力をしていたのですが、暗めの似たようなコンソール表示が二重に出てしまうエラーが起きました。

コンソールが表示される回数は、レンダリングされた回数になります。
stateの更新や親からのpropsの受け渡しで子のpropsが更新された場合などにレンダリングが再度走るはずですが、4回も更新した覚えはありません、、

解決方法

main.tsx内にある <StrictMode>タグ というのが原因でした。

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ToDoApp } from "./ToDoApp";
import { ChakraProvider } from "@chakra-ui/react";

createRoot(document.getElementById("root")!).render(
  <StrictMode> // こいつが原因
  <ChakraProvider>
    <ToDoApp />
  </ChakraProvider>
  </StrictMode>,
);

<StrictMode>タグとは開発時のみに有効になるもので、本番環境では動作せず潜在的なバグを早期に発見するための開発ツールです。

そしてStrict Mode では、以下のような開発時専用の挙動が有効になります。

• レンダーを追加で 1 回行います

• エフェクトの実行を追加で 1 回行います

• ref コールバックの実行を追加で 1 回行います

• コンポーネントが非推奨の API を使用していないかチェックします

つまり、今回の場合は「レンダーが追加で1回行われていた」ということですね。
<StrictMode>タグをコメントアウトすると

二重表示が無くなりました！

おわりに

慣れるまでは、気にせずStrictModeを有効にする方が良さそうですね。

参考