Loading Routes Lazily

During the development time in react application when you run the application on the development server, it creates the bundle of your project. You can see that on the network section in the browsers developer tool, you find bundle.js with some memory and that memory depends on the size of the application. 

What it does is, bundled your application's component which you imported normally inside any component. It uses a large space. So there is an advanced concept we can use to reduce this and for that, the application should be configured with the webpack and react-router v4 to use this concept.

Sometimes it is needed to render a child component depending on some particular conditions. So in that case we have to download that component when it is required to render. It is an advanced concept and it is beneficial when we have large components to render. It can be achieved by code splitting and for that, we need webpack configured in the application.

So, let's work with the code part now.

First, we have to make HOC (Higher Order Component) which takes a component as an argument and sets the state in ComponentDidMount during the call of imported Component Asynchronously and renders accordingly.

import React, { Component } from 'react';

const AsyncComponent = (importComponent) => {
return class extends Component {
state = {
component: null
}

componentDidMount(){
importComponent()
.then((result) => {
this.setState({ component: result.default })
});
}

render(){
const C = this.state.component;
return C ? <C {...this.props} /> : null
}
}
}

export default AsyncComponent;

Make HOC according to the above code.

Secondly, we have to work on the component we want to render when needed. Normally we import components like

import SomeComponent from './SomeComponent';

But what it does is it downloaded that component initially because the keyword "import" behaves globally. So to restrict that we import component like

import AsyncComp from './AsyncComponent';

const AsyncComponent = AsyncComp(() => {
return import('./SomeComponent')
})

It imports HOC and imports a child component by taking as an argument and return the component when it is required. So it is downloaded at the time of render only.

Conclusion:

It is useful when you render any bigger chunks of components because it creates the extra bundle beside the main bundle when it is needed.

Comments

Post a Comment

Popular posts from this blog

Comparing Application Sizes: ReactJS vs. SolidJS

Image
  Comparing Application Sizes: ReactJS vs. SolidJS When choosing a front-end framework, one of the critical factors to consider is the application bundle size. Smaller bundle sizes generally lead to faster load times and better performance, particularly on slower networks or less powerful devices. In this blog, we will compare the bundle sizes of simple applications created with ReactJS and SolidJS, using their respective CLI tools. We will also provide a step-by-step guide on how to create, build, and analyze these applications. Table of Contents Introduction to ReactJS and SolidJS Creating a ReactJS Application Creating a SolidJS Application Building the Applications Comparing the Bundle Sizes Conclusion 1. Introduction to ReactJS and SolidJS ReactJS ReactJS is a widely-used JavaScript library for building user interfaces, particularly single-page applications. Created by Facebook, React allows developers to create reusable UI components and manage the state efficiently. Pros : R...
Read more

Demystifying the "Mod_Security" Error: An In-Depth Analysis

Image
  Introduction: In the realm of web development and server administration, encountering errors is an inevitable part of the journey. One such error that often perplexes users and developers alike is the "An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security." error. In this blog post, we will embark on a journey to understand this error in detail, unravel its underlying causes, and explore potential solutions. Understanding the Mod_Security Error: The error message itself, while cryptic, provides some valuable clues. It indicates that the server's ModSecurity module has detected an issue with the requested resource and has subsequently blocked access. But what is ModSecurity, and why does it sometimes hinder our legitimate requests? ModSecurity: A Guardian of Web Applications ModSecurity is an open-source web application firewall (WAF) that acts as a barrier between your web application and pote...
Read more

Exploring onMount in SolidJS vs useEffect in ReactJS

Image
  🚀 Exploring onMount in SolidJS vs useEffect in ReactJS When developing with modern frontend frameworks, managing side effects is crucial. Both SolidJS and ReactJS provide elegant ways to handle side effects, but they do so in different ways. In this post, we’ll explore onMount in SolidJS and useEffect in ReactJS with cool examples and diagrams. 🌟 SolidJS: onMount What is onMount? In SolidJS, onMount is a lifecycle hook that allows you to run side effects when a component is first rendered. It's a straightforward way to execute code exactly once during the component's lifecycle, making it ideal for initialization tasks like API calls or setting up subscriptions. Example: Fetching Data Once on Mount Diagram: SolidJS onMount Flow 🔥 ReactJS: useEffect What is useEffect? In ReactJS, useEffect is a hook that manages side effects in function components. It allows you to perform actions like data fetching, subscriptions, or manually changing the DOM. useEffect runs after the ...
Read more