React Lazy

Lazy loading made simple in react after the React.16.6.0 is released.

When we think to implement lazy loading in react, we go to npm, search for a package and we will use the most downloaded and stared library ( react-loadable ). It is awesome one i was using until react 16.6.0 is released.

After React 16.6.0 released, we may not need to use library, lazy loading support is build into react by providing a Suspense component (only for lazy loading right now. ;( )and lazy method.

All you need to do is that , just import as following and use it.

Here is the full example how to use it.

One thing that still hinder me from using React.lazy is that the stable release of Suspense component is not yet supporting maxDelay props. ( maxDelay props help us showing loading….. only when the request takes more than specified amount of time).

The workaround for maxDelay props could be writing a Loading component that decides whether to show the loading or not. You can see that loading component in the above example.

Also there is not hint about how to import named exports from modules. In the example above i have specified the way to handle this situation in the commented out code.