ChakraUIでダークモードを実装しようとしたら少しハマった

はじめに

ChakraUIでダークモードを実装しようとしたら、Reactの<React.StrictMode>のところで少しハマってしまいました。

対象読者

• Next.jsでダークモードを実装しようとしたら、画面切り替えのたびに一瞬、ダークモードが解除されてしまう挙動になってしまった方

事象

npm run devで、開発モードで起動すると以下のようになってしまう。

原因

Reactの<React.StrictMode>が開発環境では有効になっていたため。

解決法

npm run startで本番環境モードで起動する。

まとめ

Reactでは、<React.StrictMode>がmain.tsxに記載してあるため、分かりやすかったですが、
Next.jsは書かれていなく内部で処理をしているようなので気づけなかったです。
公式をもっとちゃんと理解しなきゃいけないです。