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

sawdahoque234

Sawda Hoque

Posted on May 24, 2022

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.

💖 💪 🙅 🚩
sawdahoque234
Sawda Hoque

Posted on May 24, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related