Запретить размонтирование компонента макета gatsby на странице и изменение темы

Question

Я пытаюсь реализовать компонент макета на сайте gatsby, чтобы компонент не отключался при изменении страницы. Я также использую Mdx и theme-ui. Чтобы предоставить компонент макета, я используюgatsby-plugin-layout и компонент хранится в src/layouts/index.js. Так выглядит компонент макета:

    /** @jsx jsx */
    import { jsx } from 'theme-ui';
    import { useEffect } from 'react';
    import { Global } from '@emotion/core';
    import styled from '@emotion/styled';
    import { MDXProvider } from '@mdx-js/react';

    import Code from 'components/Code';
    import { Em, EmWithError } from 'components/Em';
    import { Strong } from 'components/Strong';
    import { OrderedList, UnorderedList } from 'components/List';
    import Paragraph from 'components/Paragraph';
    import TextLink from 'components/TextLink';
    import Hr from 'components/Hr';

    import { H1, H2, H3, H4, H5, H6 } from 'components/Heading';

    import Header from 'components/Header';
    import Footer from 'components/Footer';
    import resetStyles from 'lib/resetStyles';

    const mdxComponents = {
    code: Code.Prism,
    pre: Code.Pre,
    h1: H1,
    h2: H2,
    h3: H3,
    h4: H4,
    h5: H5,
    h6: H6,
    em: Em,
    hr: Hr,
    ul: UnorderedList,
    ol: OrderedList,
    p: Paragraph,
    strong: Strong,
    a: TextLink,
    EmWithError, // https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/#shortcodes
    };

    const Layout = ({ children }) => {
    useEffect(() => {
        console.log('Layout mounted');
        return () => {
        console.log('Layout unmounted');
        };
    });

    return (
        <MDXProvider components={mdxComponents}>
        <LayoutContainer
            sx={{
            fontSize: [1, 2, undefined, 3, undefined, undefined, 4],
            lineHeight: 'body',
            fontFamily: 'body',
            fontWeight: 'regular',
            backgroundColor: 'background',

            [`& :not(pre) > code, & :not(pre) > code[class*='language-']`]: {
                fontSize: '0.8em',
                borderRadius: '3px',
                padding: '2px 4px',
                bg: 'codeBlockBackground',
                fontFamily: 'monospace',
            },

            '& ::selection': {
                backgroundColor: 'primary',
                color: '#fff',
                textShadow: 'none',
            },
            '.keyword': {
                color: 'primary',
            },
            }}
        >
            <Global styles={resetStyles()} />
            <Helmet>
                <meta name="theme-color" content={theme.colors.primary} />
            </Helmet>
            <Header />
            <Main>{children}</Main>
            <Footer />
        </LayoutContainer>
        </MDXProvider>
    );
    };

    export default Layout;

    const LayoutContainer = styled.div`
    min-height: 100vh;
    min-height: -webkit-fill-available;
    `;

    const Main = styled.main``;

Для отслеживания размонтирования и монтажа компонентов я использовал useEffectкрючок. Теперь, когда я перехожу на другую страницу или меняю тему (используя переключатель темного режима, реализованный вHeader компонент) Я обнаружил, что компонент макета перемонтируется, как показано console.log. Похоже, это вызывает проблемы с производительностью на страницах с большим содержимым MDX. Как я могу это исправить?