React lazy loadning, suspense example

React.js

Nicesnippets

405

16-04-2020


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...