[React] ChromeのDevToolsのConsoleに薄いログが出力される件

ペアプロ時にChromeのDevToolsのConsoleに薄いログが出力され、「お？」となったので調査。

ChromeのDevToolsのConsoleに、通常のログに加えて薄いログも出力されている様子

なお「どうやらReact DevToolsが原因らしい」、というところまでペアプロの際に動作確認ベースで判明していた。
しかしながらその時の主眼は別にあったのでなぜこの現象が発生していたのかまでは追えていなかった。

原因

React の strictモードが原因だった。
stricモードが有効になっていると関数コンポーネント等が2回呼び出され、それに伴い仕込んだログも2回出力されるのだが、React DevToolsを利用しているとその2回目のログが薄く表示されるとのこと。
https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects:~:text=if you have React DevTools installed%2C the logs from the second call will appear slightly dimmed

この挙動はReact 18から。もともと17系で開発をしていたプロジェクトだったのだが、最近18にあがったことにより挙動が変わり冒頭のペアプロ時の「お？」に繋がったものと考えられる。

React 17 の挙動

React 17 の時点でも関数コンポーネントが2回呼び出されてはいた（strictモード 且つ 開発モード のとき）のだが、React側で console.log() のようなコンソールメソッドを自動的に書き換えていたため、ログが複数回出力されることはなかった。

https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state:~:text=In React 17%2C React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions

ちなみに useEffect() が想定より多く呼ばれるという観点でも調査をした際の原因もReactのstrictモードだった。
https://zenn.dev/kentaro/scraps/e29ace4a3600a5