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.