Nur Rony
Polyglot Programmer, DevOps and Forever Learner

React Lazy and Suspense for lazy loading

React Lazy and Suspense for lazy loading

ReactJS brings lots of cool and awesome features in 16. React Lazy and Suspense is two of them. These takes lazy loading and code splitting to a new level.

What is lazy loading and code splitting?

Sometimes we have to introduce a big chunk of code to cover some functionality. This code can be importing 3rd party dependency or writing it on our own. This code then affects the main bundle’s size.

Downloading a few MBs is a piece of cake for today’s internet speed. We still have to think about the users with a slow internet connection or using mobile data.

How was it done before React 16?

If you are using code splitting and lazy loading you can use loadable-components. In fact native React Lazy and code splitting still have some limitations and they recommend this.

Demo Time