Saturday, January 11, 2025
Google search engine
HomeLanguagesHow to dynamically load module in React.js ?

How to dynamically load module in React.js ?

In this article, you will understand to import and load the modules or components dynamically in ReactJS. In ReactJS loading of modules statically is cumbersome as it loads the modules beforehand even if it not rendered. Some components render only when the user interacts, so in such cases, it can lead to more resource consumption. When you statically import modules, you are loading larger data than you may actually need, which could lead to a slower initial page load. To solve this problem we import the modules dynamically. Further, will understand how this can be done. 

Let’s understand using step-by-step implementation. 

Steps to create react application:

Step 1: Use create-react-app to build react

npm create-react-app <project_name>

Step 2: Go to <project_name>

cd <project_name>

Project Structure: The project looks something like this.

 

Example 1: In this example, we will recognize the static load of resources in ReactJS. Let’s suppose we have a component that displays text and that is imported statically from another file into the main file. It gets loaded beforehand. We have two files index.js and app.js.

File: index.js

Javascript




import React from 'react';
import * as ReactDom from 'react-dom';
  
import App from './app'
  
const Btn = () => {
    const [disp, setDisp] = React.useState(true);
    return (disp) ? (<button onClick={() => 
        setDisp(false)}>Click Me</button>) : <App />
}
ReactDom.render(<Btn />, document.getElementById('root'));


File: app.js

Javascript




import React from 'react';
import ReactDom from 'react-dom'
  
class Text extends React.Component {
  
    constructor(props) {
        super(props);
    }
  
    render() {
        return (
            <p>The Content is loaded on neveropen....</p>
        )
    }
}
  
export default Text;


Output:

 

In the above example, the 0.chunk.js is loaded beforehand immediately when the app loads. Here the modules are imported at the compile time.

Approach: To import the modules dynamically ReactJS supports React.lazy( ) method.  This method accepts a function as an argument and renders the component as a regular component and the function must call the import( ) that returns a promise. This is used along with <Suspense> because it allows us to display the fallback content while we are waiting for the module to load. We again have two files  index.js and app.js where the app.js is loaded dynamically using <Suspense> and React.lazy( )

File: index.js

Javascript




import React from 'react';
import * as ReactDom from 'react-dom';
  
const Component = React.lazy(() => import('./app'))
  
const Btn = () => {
    const [disp, setDisp] = React.useState(true);
    return (disp) ? (<button onClick={() => 
        setDisp(false)}>Click Me</button>) : 
        (<React.Suspense fallback={<div>Loading...</div>}>
            <Component />
         </React.Suspense>)
}
ReactDom.render(<Btn />, document.getElementById('root'));


File: app.js

Javascript




import React from 'react';
import ReactDom from 'react-dom'
  
class Text extends React.Component {
  
    constructor(props) {
        super(props);
    }
  
    render() {
        return (
            <p>The Content is loaded on neveropen....</p>
        )
    }
}
  
export default Text;


Output:

 

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments