Preloading with React.lazy

Question

react-loadable exposes a very nice method YourLoadableComponent.preload() thanks to which you can easily preload component before it gets rendered whenever you want (onMouseOver etc).

I can see I can do something like: https://github.com/pomber/react-lazy-preload-demo/pull/8/commits/126c1bf6e2a23b3e3f7eb0ffb1b4db260516643f so to call import() manually, store the resulting Promise in some variable and then pass it to React.lazy(). However it can be a bit too verbose and problematic if I wanted to preload on some class method call or in lifecycle hook.

Any other alternatives to above approach?

Answer 1

You can give https://github.com/ianschmitz/react-lazy-with-preload a try. Seems to suite your use case nicely!