月別記事一覧実装後のバグ解決 その1
セレクトボックスのカラーがダークモードでデフォルトになっている · Issue #46 · tagucch/random.tagucch.dev
昨日に出した月別記事一覧で、早速バグがあった。
自分では見つけられなかったんだけど、すぐにyamanokuさんが見つけてIssue化してくれた。本当に感謝……。
Issue化に際しても、動作のスクショと実行環境を書いてくれていて、自分だったら絶対これやってないな……と思ったので本当に助かります。
ライトモード/ダークモードのうちライトモードのときだけ発生するバグで、ライトモードの状態でページを初期表示するとセレクトボックスだけがダークモードの色になっているというもの。
コードを追っていって、変数をconsoleに出したり画面上に出したりデバッグして分かったのだが、react-selectのcustomStylesを当てる際に使う「ライトモードかどうか」のコードで、ライトモード/ダークモードの切り替えに使っているnext-themesが提供しているuseTheme()から取得できるthemeがundefinedになっていた。
これの原因を解決するためにライトモードかどうかのbooleanをuseEffect内でセットするようにしたのだが、これだと画面が表示されたあとにラグがあって切り替わる(ComponentDidMountと同等なので)
どうしよと思って症状を呟いたら、速攻でuhyoさんがアドバイスくれた。
その場合useLayoutEffectが目的のものかもしれません（？）
— 🈚️うひょ🤪✒📘 TypeScript本発売🫐 (@uhyo_) May 8, 2022
useLayoutEffectを使ったら無事ラグがなくなりました。本当に感謝。