React lazy loadning, suspense example

04-Apr-2023

.

Admin

Hello Friens,

If you have to first load you content before website load then use lazy loading with route. you can also use gif image in lazy loading. we are also set setTimeout with component. The React.lazy function lets you render a dynamic import as a regular component.

const { lazy, Suspense } = React;

const Lazy = lazy(() => new Promise(resolve => {

setTimeout(() => {

resolve({ default: () => });

}, 10000);

}));

const Resource = () => (

<div className="box">

<h1>React Lazy</h1>

<p>This https://www.nicesnippets.com/ component loaded after 10 seconds, using React Lazy and Suspense</p>

</div>

)

const App = () => {

return (

<Suspense fallback={ <div>nicesnippets.com Loading...</div> }>

<Lazy/>

</Suspense>

)

}

ReactDOM.render(

,

document.getElementById('root')

);

I hope it can help you...

#React.js