備忘録記事

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

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

MUIのStyledとは？

スタリング用のAPI。

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

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

記述方法など

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

styled() - MUI System

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

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

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

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

React.memoなどを試す

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

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

styled()が原因

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

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

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

解決策

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

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

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

なぜ？

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

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

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

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