react_devtools_backend.js:2842 Over 200 classes were generated for component Seekbar__Preview with the id of "Seekbar__Preview-sc-16onun1-1". Consider using the attrs method, together with a style object for frequently changed styles. Example: const Component = styled.div.attrs(props => ({ style: { background: props.background, }, }))`width: 100%;`
ってconsoleに出て…attrsってなんやねんと思い調べる
styled-componentsの使い方(パッとわかりやすく、色々なパターンを説明することを目指しています) · GitHub
もともとはこう書いていて
type PreviewProps = { currentTime: number duration: number } const Preview = styled.div<PreviewProps>` position: absolute; top: 0; left: 0; height: 4px; width: ${(props) => props.currentTime / props.duration}%; `
これを以下に直せ、ということだったみたい
type PreviewProps = { currentTime: number duration: number } const Preview = styled.div.attrs<PreviewProps>((props) => ({ style: { width: `${props.currentTime / props.duration}%` } }))<PreviewProps>` position: absolute; top: 0; left: 0; height: 4px; `
こうするとPropsが更新されてもクラス名が変わらなくなりHTMLに直に値が入るようになる
200回以上クラスを生成していると怒ってくれるんだな…すごいね…その頻度で生成し続けたらパフォーマンス的に影響あるから、ということなのだろうな…