React – Load code-on-demand using Code Splitting

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. Code Splitting helps apps to perform well where performance is key.

Code Splitting is the concept in React that helps to load the content only when it is actually required. Instead of loading the whole app even before a user can use it, we can write code effectively that it loads only when required.

A function can import the whole module using an import statement function and returns a promise as shown below.


### student.js
const Name = 'Divikiran Ravela';
export { Name };

Since import returns promise data will load when it is ready as shown below.

.then(({ Name }) => {
// Use moduleA
console.log("I am "+Name);

For example, if you wanted to load data when a user clicks on the button we can achieve as below

handleClick = (props) => {
.then(({ Name }) => {
// Use Student
console.log("I am " + Name);
.catch(err => {
// Handle failure

Screen Shot 2017-09-28 at 11.18.31.png

Here is the full code if you are interested

Screen Shot 2017-09-28 at 11.16.08.png


Screen Shot 2017-09-28 at 11.18.56.png






Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: