Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 React Code Splitting, How to improve performance of React application, Bundle in React Js:-

In this article, I am trying to cover the following topics


1)  React Code Splitting

2)  React Lazy Loading

3)  Suspense in React

4) Error Boundary in React


The React app bundled their files using tools like Webpack or Browserfy. Bundling is a process that takes multiple files and merges them into a single file, which is called a bundle. The bundle is responsible for loading an entire app at once on the webpage. We can understand it from the below example.


App.js


import { add } from './add.js';  

  

console.log(add(16, 26)); // 42  



add.js

export function add(a, b) {  

  return a + b;  

}  


Bundle file as like below:


function add(a, b) {  

  return a + b;  

}  

  

console.log(add(16, 26)); // 42  


As our app grows, our bundle will grow too, especially when we are using large third-party libraries. If the bundle size gets large, it takes a long time to load on a webpage. For avoiding the large bundling, it?s good to start? splitting? your bundle.


React 16.6.0, released in October 2018, and introduced a way of performing code splitting. Code-Splitting is a feature supported by Webpack and Browserify, which can create multiple bundles that can be dynamically loaded at runtime.


Code splitting uses React. lazy and Suspense tool/library, which helps you to load a dependency lazily and only load it when needed by the user.


Advantage of  code splitting:

The performance of the app

The impact on memory

The downloaded Kilobytes (or Megabytes) size

React.lazy

The best way for code splitting into the app is through the dynamic import() syntax. The React.lazy function allows us to render a dynamic import as a regular component.

Before

import ExampleComponent from './ExampleComponent';  

  function MyComponent() {  

  return (  

    <div>  

      <ExampleComponent />  

    </div>  

  );  

}  

After

const ExampleComponent = React.lazy(() => import('./ExampleComponent'));  

  function MyComponent() {  

  return (  

    <div>  

      <ExampleComponent />  

      <AbcComponent />

      <HelloComponent />

    </div>  

  );  

}  

The above code snippet automatically loads the bundle which contains the ExampleComponent when the ExampleComponent gets rendered.


What is Suspense in React


If the module which contains the ExampleComponent is not yet loaded by the function component(MyComponent), then we need to show some fallback content while we are waiting for it to load. We can do this using the suspense component. In other words, the suspense component is responsible for handling the output when the lazy component is fetched and rendered.


const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  

  

function MyComponent() {  

  return (  

    <div>  

      <Suspense fallback={<div>Loading...</div>}>  

        <ExampleComponent />  

      </Suspense>  

    </div>  

  );  

}  

The fallback prop accepts the React elements which you want to render while waiting for the component to load. We can combine multiple lazy components with a single Suspense component. It can be seen in the below example.


const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  

const ExamComponent = React.lazy(() => import('./ ExamComponent'));  

  

function MyComponent() {  

  return (  

    <div>  

      <Suspense fallback={<div>Loading...</div>}>  

        <section>  

          <ExampleComponent />  

          <ExamComponent />  

        </section>  

      </Suspense>  

    </div>  

  );  

}  

Note: React. lazy and Suspense components are not yet available for server-side rendering. For code-splitting in a server-rendered app, it is recommended to use Loadable Components.

What Error boundaries in React JS

If any module fails to load, for example, due to network failure, we will get an error. We can handle these errors with Error Boundaries. Once we have created the Error Boundary, we can use it anywhere above our lazy components to display an error state.


import MyErrorBoundary from './MyErrorBoundary';  

const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  

const ExamComponent = React.lazy(() => import('./ ExamComponent'));  

  

const MyComponent = () => (  

  <div>  

    <MyErrorBoundary>  

      <Suspense fallback={<div>Loading...</div>}>  

        <section>  

          <ExampleComponent />  

          <ExamComponent />  

        </section>  

      </Suspense>  

    </MyErrorBoundary>  

  </div>  

);  



Example of Code Spliting using lazy ad Suspense?


1)  create function component:-

import React from 'react';   
 
function NameList() {  
   
  return (  
    <div>  
        <h2>Rendering Lists inside component</h2>  
              
    </div>  
  );  
}  

export default  NameList;



2)  Create App.js top define suspense ad lazy


import React,{ lazySuspense }  from 'react'
//import NameList from './NameList'
const NameList = React.lazy(() => import('./NameList'));  
  
class App extends React.Component {  
  render() {  
    return (  
      <div>  
         <Suspense fallback={<div>Loading...</div>}> 
          <NameList></NameList>
          </Suspense>  
       
      </div>  
    )  
  }  

export default App;

3)  Code of Index.js file

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  
  import reportWebVitals from './reportWebVitals';
  import App from './App'
  
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

  // If you want to start measuring performance in your app, pass a function
  // to log results (for example: reportWebVitals(console.log))
  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
  reportWebVitals();


    



Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post