How to Boost React App Load Time in One Step

Google Docs and YouTube use a similar technique to save more than 500KB of resource loading. This simple technique will quickly improve your React app’s loading time.

Sometimes there are components in our app that should be hidden on the page unless required. A typical example is the lazy loading of pictures not in the viewport.

𝐇𝐨𝐰 𝐰𝐢𝐥𝐥 𝐭𝐡𝐢𝐬 𝐢𝐦𝐩𝐫𝐨𝐯𝐞 𝐦𝐲 𝐥𝐨𝐚𝐝𝐢𝐧𝐠 𝐭𝐢𝐦𝐞?

This simple technique allows us to shorten the first loading time because we’re not requesting all photos immediately. The same method can be applied to other parts of the app.

The technique is simple: we will not load those components in our app that are not necessarily important when the app is loaded. App will load those components on a need basis, such as: when they are in the viewport or on user interaction.

Since the resources are loaded on demand, it will save the load time required to fetch those resources. It is very effective in those cases when your app has several heavy components to load.

Google Docs and YouTube use a similar technique to save more than 500KB of resource loading.

𝐀 𝐬𝐢𝐦𝐩𝐥𝐞 𝐚𝐩𝐩 𝐭𝐨 𝐥𝐨𝐚𝐝 𝐡𝐞𝐚𝐯𝐲 𝐫𝐞𝐬𝐨𝐮𝐫𝐜𝐞 𝐨𝐧 𝐝𝐞𝐦𝐚𝐧𝐝

This is a simple chat app that loads heavy emoji picker components on demand.

Demo link: https://chat-app-eight-ashen.vercel.app

The above application is a simple example of this use case. When the EmojiPicker is rendered on the emoji button click, react lazy detects if the EmojiPicker component should be visible on the screen.

Then it begins importing the component module. The app will display loading while the component is being imported.

This loading component is beneficial in the process. Since the component is imported on demand, we need feedback for the user. The loading component informs the user that the application has not frozen: they only need to wait for the component to be loaded.

These simple techniques prove to be a lifesaver when building heavy apps. Use this technique wisely because using it with every component can lead to poor performance.