Code Splitting with React

import React, { FC, lazy, Suspense, useState } from 'react';

// Code Spliting with dynamic imports
const MenuContainer = lazy(() =>
  import('./MenuContainer')
    .then(({ MenuContainer }) => ({ default: MenuContainer })),
);

const Navigation: FC = (): JSX.Element => {

  const [open, toggle] = useState<boolean>(false);

  return (
    <>
      <button
        onClick={() => toggle(true)}
      >
        Open
      </button>
      {open &&
        // Using React Suspense, the component is dynamically imported
        <Suspense fallback={<div>Loading...</div>}>
          <MenuContainer />
        </Suspense>
      }
    </>
  )
}

export { Navigation }