再レンダリング

[cossack910]

タイミング

• stateが更新されたコンポーネントは再レンダリング
• propsが変更されたコンポーネントは再レンダリング
• 再レンダリングされたコンポーネント配下の小要素は再レンダリング

親A->子B->孫C

Bが再レンダリングされた時、その子Cも再レンダリングされる。親Aはスキップ

[cossack910]

memo

親コンポーネントが再レンダリングされた時に子コンポーネントに再レンダリングをスキップできる。 不要なレンダリングがなくなるのでパフォーマンス最適化につながる。

export const ChildArea: React.FC<ChildAreaProps> = memo((props) => {
    const {open} = props;
    return(
        <>
        {
            open ? (
                <div>
                    <p>子コンポーネント</p>
                </div>

            ) : null
        }
        </>
    );
});

[cossack910]

useCallback

親コンポーネントで定義したアロー関数をpropsとして、子コンポーネントに渡すと親コンポーネントが再レンダリングされた時に新しい関数として再生成されるため、memo化されている子コンポーネント側でも再レンダリングされてしまう。 この防止策として本関数を使用する。

子コンポーネントにpropsとして渡しているアロー関数に使う

  const onClickClose = useCallback(() => setOpen(false), [setOpen]);

[cossack910]

useMemo

変数のメモ化

const temp = useMemo(() => 1+3, []);