2022-11-15(更新)

【Gatsby.js】MUIのstyled-componentが再レンダリングを引き起こしていたメモ

MUIでデザインしている本サイト、ドロワを開くたびにメインコンテンツが再レンダされていた。この問題がstyled()によって起こっていた件。

Article Image
使用ソフトウェアバージョン備考
Gatsby.js4.24.4
MUI5.10.10

備忘録記事

この記事は私がぶち当たった問題を解決する備忘録記事。

テスト的内容、簡略的な記述になる。

MUIのStyledとは?

スタリング用のAPI。

MUIはスタイリング(CSS的な)を実装する方法が色々あって、その1つ。

私がすべてのスタイリング法に精通しているわけでもなく本記事の主旨ではないため解説は省略。

記述方法など

styled()については公式を参照

styled() - MUI System

無駄に「再描画」されるバグ

本サイトに何が起こっていたかを先に記述する。

ドロワを開くたび右側の記事スペースが再描画される。

これはそういうものだと思っていたのだが、iOSでVideoタグが最大化されてしまう問題やYoutube動画コンテンツをリロードしてしまうという無駄があり、本格的に問題解決できないかと考えた。

React.memoなどを試す

ReactにはReact.memo, React.useMemo等が存在しており部分的に再レンダリングしないようにするコードが実装されている。

本サイトでもこちらのコードを様々な箇所に注入しテストしたのだが一向に再描画を抑制することができなかった。

こちらのコードは少々専門的になるため解説はしない。気になる場合は別サイトを調べてもらえればと思う。

styled()が原因

結論からすればstyledでスタイリングしたコンポーネントが原因だった。

一番上のレイアウトコンポーネントから1つずつコードを削減していったところ、どういうわけか本サイトの一部だけstyledで記述された項目があることに気づいた。

ローラー作戦ではあったが、なんとこのスタイリングを外したところ再描画が止まった。

解決策

なんと、シンプルにここをsxを使って直接スタイリングを書く方法に変更しただけで解決した。

スタイリングコードは変更していない。

本当にそれだけだった。丸一日消費した。

なぜ?

正直よくわかっていない。動いているからヨシという最悪の解決ではある。

AIで書いたヨシ猫

そもそもこの方式自体が少し特殊な記述法なのでバグの1つなのかもしれない。

結論:styled()の乱用は控える

あくまで個人的な結論であるが直接書いて問題ないスタイリングはsxを使用するのが無難。


この記事のタグ


謎の技術研究部 (謎技研)