CODEWITHSUNDEEP
reactjslazy-loading
Flip
Flip

Reputation: 6781

Why is lazy loading not the default for React?

I am just working through a React course and the current topic is lazy loading.

I was wondering why lazy loading is not the default and taken care of by React without forcing the developer to write repetitive code?

Example:

In the course, we want to load the Posts component lazily, because in this component we only render it when on a certain route. Therefore he replaces

import Posts from './containers/posts'

with

const Posts = React.lazy(() => import('./containers/posts'))

and where it is used he replaces

<Route path='/posts' component={Posts}>

with

<Route
  path='/posts'
  render={() => (
    <Suspense>
      <Posts>
    </Suspense)}
>

so basically just wrapping the component we want to lazyload in a certain React component.

Upvotes: 5

Views: 2750

Answers (3)

dim
dim

Reputation: 179

React is not handling the lazy loading by itself but relies on the functionality of the underlying bundler (Webpack). In particular, the bundler converts the import() statements (which is the proposal for the dynamic import) to something which could be processed by the majority of the browsers. Thus, to enforce the underlying building process to load a specific module lazy you also have to use import().

In general, splitting into multiple chunks (that's what is happening on build when lazy loading is used) might be good (e.g. for mobile users, as mentioned by @Prashant Adhikari) but also leads to additional delays while using the page because the files have to be transferred over the network one by one first. Thus, it's also not an option to have lazy loading everywhere. In fact, this issue might disappear in the future (esp. with some "intelligent" preload mechanism in HTTP/2) but for the majority of applications the best practice over the last years seems to be generating a fat JS file for application-related scripts plus a vendor.js for the dependencies.

However, introduction of lazy loading might be reasonable in order to minimize the page loading time. Esp. for bigger applications (like Stack Overflow) it makes sense to preload the modules require to depict the primary content (e.g. Questions) and lazy load the less frequent pages (e.g. User settings).

Upvotes: 3

Prashant Adhikari
Prashant Adhikari

Reputation: 63

React lazy : - It is now fully integrated into core react library itself.

Firstly, bundling involves aligning our code components in progression and putting them in one javascript chunk that it passes to the browser; but as our application grows, we notice that bundle gets very cumbersome in size. This can quickly make using your application very hard and especially slow. With Code splitting, the bundle can be split to smaller chunks where the most important chunk can be loaded first and then every other secondary one lazily loaded.

Also, while building applications we know that as a best practise consideration should be made for users using mobile internet data and others with really slow internet connections. We the developers should always be able to control the user experience even during a suspense period when resources are being loaded to the DOM.

With lazy loading you can customise and load lazily the component which are not needed for the current screen.

The question about having lazy loading natively might be answered by some more experienced guy or you can raise an issue on gitHub.

Upvotes: 2

ed&#39;
ed&#39;

Reputation: 1905

It's a relatively new feature released in the last year with React 16.6.

If there was a way to enable lazy loading for all existing projects without rewriting code, they would have included it. The fact they did not means it isn't compatible with all existing patterns.

Upvotes: 1

Related Questions