DEV Community 👩‍💻👨‍💻

Sawda Hoque
Sawda Hoque

Posted on

Lazy Loading React Components (with react.lazy and suspense)

What is React.lazy()
It is a new function in react that lets you load react components lazily through code splitting without help from any additional libraries. Lazy loading is the technique of rendering only-needed or critical user interface items first, then quietly unrolling the non-critical items later. It is now fully integrated into core react library itself.

Suspense
Suspense is a component required by the lazy function basically used to wrap lazy components. Multiple lazy components can be wrapped with the suspense component. It takes a fallback property that accepts the react elements you want to render as the lazy component is being loaded.

Top comments (1)

Collapse
andrewbaisden profile image
Andrew Baisden

Suspense is one of the better features to come from React 18.

🌚 Life is too short to browse without dark mode