React: performance optimization


Since React was introduced, it has transformed the way front-end developers build web applications, and its virtual DOM is famous for effectively rendering components. In this tutorial, we will discuss various methods of optimizing performance in React applications, and the features of React we can use to improve the performance.

React enables web applications to update their user interfaces (UIs) quickly, but that does not mean your medium or large React application will perform efficiently.

Before you can optimize your app, you will need to understand how React components work and how they are rendered in the browser. The React lifecycle methods give you ways to prevent your component from re-rendering unnecessarily. Eliminate those bottlenecks and you will have the app performance your users deserve.

Using Immutable Data Structures

The idea of using immutable data structures is simple. Whenever some object containing complex data is changed, instead of making changes to that object, a copy of that object is created with the changes. This makes detecting changes in the data as simple as comparing the reference of the two objects.

Use React.Fragments to Avoid Additional HTML Element Wrappers

Instead of using meaningless elements like
, it makes sense to use which doesn’t add an unnecessary element to the DOM.

Avoid using the inline function in the render function

Since functions are objects in JavaScript ({} !== {}), the inline function will always fail the prop diff when React does a diff check. Also, an arrow function will create a new instance of the function on each render if it’s used in a JSX property. This might create a lot of work for the garbage collector.

Avoid using Index as Key for map

Using the key as the index can show your app incorrect data as it is being used to identify DOM elements. When you push or remove an item from the list, if the key is the same as before, React assumes the DOM element represents the same component. It’s always reasonable to use a unique property as a key.

React Memoization

In simple terms, memoization is a process that allows us to cache the values of recursive/expensive function calls so that the next time the function is called with the same argument(s), the cached value is returned rather than having to re-compute the function.

This ensures our applications run faster because we avoid the time it would usually take to re-execute the function by returning a value that’s already stored in the memory.

Any of the following methods can be used:

useMemo allows us to memoize functions that are very expensive or have a very high number of calculations during each re-rendering, and we don’t want to run such functions every time we render. useMemo takes a single function and an array of arguments. useMemo will only execute that function when those arguments change. If we pass it an empty array, then it will run once, and if we don’t pass it an empty array, then it will run on every re-render. In useMemo the result is memoized if we pass the same argument, then it returns the memoized result without actually running the whole process.

This works as useMemo but the difference is that it’s used to memoize function declarations.

In REACT when a parent component re-render inside a parent, a child component also re-renders. At each re-render child component will re-execute its functions. Using call back function, the re-execute of function will solve the issue. useCallback is a built in Hook in React, it used to return a memoized version of callback function. Memoization does the remembering or caching the results of the function. Memoized version of callback only changes if one of the dependencies has changed. The cashed result is returned when same inputs are called again. Function and a list of dependencies are the input parameters to the useCallback.

useCallback is used to prevent unnecessary re-rendering in Parent component, when passing callbacks to the child components.

React.memo() is an HOC (higher-order component) which takes a component and returns an enhanced component. When React re-renders this enhanced component, it will shallow compare the new props object passed to this component with the old one. If shallow compare says that props are the same as last time then React skips re-rendering the enhanced component (and therefore all other component it re-renders).

You might be wondering why React doesn’t shallow compare props by default. That’s because there’s a high chance the comparison will be false and in such case, we’ll pay both the comparison cost and the re-render cost.


Server-side rendering (SSR) means that content on your webpage is rendered on the server and not on browser using JavaScript.
One of the main benefits of server-side rendering is a better experience for users, as they will receive viewable content faster than they would with a client-side rendered application.
Server-side rendering provides performance benefit and consistent SEO performance.

Further improvement options

• Using Production Mode Flag in Webpack

• Lazy loading

• Dependency optimization

• When considering optimizing the application bundle size, it’s worth checking how much code you are actually utilizing from the dependencies. For example, you could be using Moment.js which includes localized files for multi-language support. If you don’t need to support multiple languages, then you can consider using moment-locales-webpack-plugin to remove unused locales for your final bundle.

• Spreading props on DOM elements

• You should avoid spreading properties into a DOM element as it adds unknown HTML attribute, which is unnecessary and a bad practice. Instead of spreading props, you can set specific attributes

• Using a CDN

There are several other methods of improving the performance of your React application. This article has discussed the most important and effective methods of performance optimization. If these methods are applied properly then you can achieve remarkable feats as far as the speed of the React app is concerned.

  • 9. 2. 2023