React: How to Lazy Load Components

import React from ‘react’;

const Component = React.lazy(() => import(‘./Component’));

const preloadComponent = () => {
import(‘./Component’);
}

export default App = () => {
const [showComponent, setShowComponent] = useState(false);

return (
<div>
<h1 onMouseOver={preloadComponent}>Component</h1>
<button onClick={ () => { setShowComponent(true); } }>Show component</button>
<React.Suspense fallback={<div>Loading</div>}>
{showComponent && <Component />}
</React.Suspense>
</div>
)
};

By comparison, next.js already has built-in support for lazy loading. Routes are lazy-loaded by default.

Here’s an example of lazy loading using the browser’s intersection observer API.