6 React.js Performance Tips Every Web Developer Should Learn

Hello guys, if you are working in a React.js application and looking for best tips to improve performance of your react application then you have come to the right place. 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.

6 Tips to improve performance of React application

Here are 6 practical tips to improve performance of 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.

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

• What are Higher-Order Components in React
• How to use Styled component in React.js with example
• What is Context API in React.js with example
• How to use Context and useReducer in state management
• What is render props in React.js with example
• How to create custom hooks in React.js
• 6 Ways to optimize the performance of React Application
• How to use lifecyble methods in React
• What is Lifting up the state means in React.js
• 5 Best React.js courses for beginners
• How to use PropType in React.js with example
• How to use React form using JSX
• useReducer example in React app
• How to create a dynamic list in React.js with example

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.