Reactでスタイルの再レンダリングを防ぐ

CSS in JS(emotion)

emotionを使ってスタイリングを当てていた時、モーダルを表示させるとモーダルの後ろのアイコンの画像とかが一瞬消えるぞ？🤔 と思っていたら記述の方法が悪かったようです。

スタイルはコンポーネント内に書かない

スタイル内で使いたい変数がコンポーネント内にあったりしたので、スタイルもコンポーネント内に記述していたんですが、中に記述するとコンポーネントが再レンダリングされたときにスタイルまで再描画されてしまうので、基本的には外側に書いたほうが良さそうです。

修正前

import IconImg from '../path/to/img.png';
import { css } from '@emotion/css';

const SampleComponent = () => {
    const SampleStyle = css`
        width: 100%;
        font-size: 20px;
        color: red;
    `;

    return (
        <div css={SampleStyle}>
            <div><img src={IconImg} alt="" /></div>
            <p>sample text</p>
        </div>
    )
}

修正後

import IconImg from '../path/to/img.png';
import { css } from '@emotion/css';

const SampleStyle = css`
    width: 100%;
    font-size: 20px;
    color: red;
`;

const SampleComponent = () => {
    return (
        <div css={SampleStyle}>
            <div><img src={IconImg} alt="" /></div>
            <p>sample text</p>
        </div>
    )
}

おわり

最初はフェッチとかもしてないのに何で画像消えてるのかと思っていましたが、割と単純な原因でした。