Disclosure: This article may contain affiliate links. When you purchase, we may earn a commission.

6 Ways to optimize a React application performance

Introduction

Performance is one of the biggest reasons why React.js has gained immense popularity in the last five years. React uses virtual DOM to boost performance. Though React does what it has to do to increase the performance behind the scenes, the developer has to ensure a top-quality user experience. In this article, we will discuss some of the ways which can be used to optimize the performance of a React application.



1. React.memo

Unnecessary rendering of a React component can cause performance issues. So it is recommended to re-render a component only when it is required. The general behavior of a React component is to re-render when a change is made such as a change in state. React.memo performs memoization.


Memoization is the process in which function calls are stored and their cached result is returned if the inputs are the same as the previous one. So, React.memo will re-render the component only when the props change, thus improving the performance of the application.


Following is how React.memo is used.


import React from "react";

 

const DemoComponent = React.memo((props) => {});




2. React.Fragment

In React, it is necessary to wrap the adjacent elements in the JSX into a single element or it will throw an error. For example, we can’t do something like the following. 


const DemoComponent = () => {

 

  return (

     <h1> Hello World! </h1>

     <h1> Say Hi </h1>

     <h1> Bye Bye </h1>

)

}


To fix this, developers generally use a <div> tag to wrap the elements.


const DemoComponent = () => {

  return (

    <div>

      <h1> Hello World! </h1>

      <h1> Say Hi </h1>

      <h1> Bye Bye </h1>

    </div>

  );

};


This will do the job but it unnecessarily adds an extra node to the DOM tree. To avoid this, either use React.Fragment or <> </> syntax for declaring fragments.


import React from "react";

 

const DemoComponent = () => {

  return (

    <React.Fragment>

      <h1> Hello World! </h1>

      <h1> Say Hi </h1>

      <h1> Bye Bye </h1>

    </React.Fragment>

  );

};




3. React.lazy

React.Lazy is a new feature provided by React to perform lazy loading. In lazy loading, the performance of the application is boosted by controlling the loading time of the components. The component will only load when it is required. 


To use React.Lazy, we need to wrap it inside a “suspense” component. Then, in React.Lazy, it is required to define a function that calls a dynamic import. 


import React, { Suspense } from "react";

 

const LazyLoadComponent = React.lazy(() => import("./LazyComponent"));

 

function DemoComponent() {

  return (

    <>

      <Suspense fallback={<div>Data loading...</div>}>

        <LazyLoadComponent />

      </Suspense>

    </>

  );

}


4. shouldComponentUpdate

A React component re-renders every time the state changes or new props arrive. But it is not always necessary to re-render a component when the state changes. So React provides a special lifecycle specifically created to control the re-rendering of a component.


shouldComponentUpdate() method has two parameters - newProps and newStates. It returns a boolean value. shouldComponentUpdate() can be used to optimize the performance of a React application by controlling the re-rendering of a component.


This lifecycle method is only supported in class-based components but similar functionality can be achieved in functional components using the useEffect() hook.



6 Ways to optimize a React application performance



5. Controlling long lists

It is common to encounter a situation where a long list of data is to be displayed on the screen. Instead of rendering the entire list, to something known as “windowing”.


In windowing, the list is rendered according to the viewport size of the browser. In simple terms, only that part of the list will be rendered that can be visible on the screen. The next part of the list will be rendered as the user scrolls the list.


To perform “windowing”, you can use react libraries such as react-window or react-virtualized.





6. Using reselect

Redux is a third-party state management library that is heavily used with React. It is huge and complicated itself and thus it can cause some performance issues. 


In redux, whenever an action is dispatched, new object references are created. This can cause unnecessary re-renders, thus hampering the performance of the React application. The reselect library helps in controlling these re-renders caused by redux.



Conclusion

A developer should optimize the performance of the application as much as possible. React provides several ways to optimize the application. In this article, we discussed some of the commonly used ways to optimize the performance of a React application.


Other React.js  Articles and Tutorials you may like

Thanks for reading this article so far. If you like these best ways to optimize React application please share them with your friends and colleagues. IF you have any questions or feedback, then please ask in the comments. 



No comments:

Post a Comment

Feel free to comment, ask questions if you have any doubt.