By Panduka Liyanathanthri

The global power consumption of the Internet is estimated to be around 3-5% of the world’s total electricity usage which includes all aspects of the Internet, including data centers, network infrastructure, and end-user devices.

Developers and software organizations bear a significant responsibility in prioritizing sustainability and optimizing power consumption in their software solutions. By doing so, they can contribute to reducing the overall power consumption of the web and minimizing its environmental impact.

Frameworks like React, Angular, and Vue.js are the go-to toolkits in today’s web development for building complex web applications. Among them, React leads the pack as the most popular web application development framework.

In this article we are discussing some essential performance optimization tips for developing React applications which can drastically reduce the resource usage of the applications at the end users’ devices, thereby reducing the environmental impact.

Using Functional Components

React functional components offer superior performance compared to class components. One reason is their lightweight nature. They don’t carry the additional baggage of lifecycle methods or internal state, resulting in faster rendering and updates.

Functional components also eliminate the need for the “this” keyword, which can cause performance issues in class components due to binding or context changes. Moreover, functional components allow event handlers to be declared without explicit bindings, leading to cleaner and more efficient code.

Overall, functional components, along with React hooks, provide a recommended approach for achieving optimal performance in React applications.

Memoized Components

React usually re-renders components whenever its parent re-renders even if the component’s props do not change. This can be a costly operation when working with datasets, databases, or a list of data where the same component could be re-rendered with the same props multiple times.

Memoization is the process of caching the result of a function or component based on its input and reusing that cached result instead of recomputing it when the input remains the same. When a memoized component receives new props, React performs a shallow comparison of the new and previous props. If the props haven’t changed, the memoized component is not re-rendered, and the cached result is used instead.

React provides a built-in mechanism for memoization through React.memo API. By wrapping a functional component with React.memo, the component will be memoized, and its rendering will be optimized.

export function ListItem({ heading, content }) {
  return (
    <div>
      <div>{heading }</div>
      <div>{content}</div>
    </div>
  );
}
export const MemoizedListItem = React.memo(ListItem);

Should Component Update?

If the comparison of the shallow copies of the new and old props is not sufficient and much-advanced comparison is needed, React provides a lifecycle hook for manually comparing the old and new props and deciding if re-rendering of the component is needed.

By, default React returns true in this lifecycle hook and the components are -re-rendered and then compared against the old DOM tree to find if the new component needs a DOM update. This is the default implementation of the shouldComponentUpdate lifecycle hook;

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

By overriding this default behavior, we can gain some performance by reducing the number of re-renders. The following is an example where this lifecycle hook is used to limit the re-renders based on application requirements;

shouldComponentUpdate(nextProps, nextState) {
  if (this.state.count !== nextState.count) {
    return true;
  }
  return false;
}

Virtualizing Lists

React virtualization is a technique used to efficiently render large lists or collections of data in React applications. It aims to optimize performance by rendering only the visible portion of the list, rather than rendering all the items at once.

There are several popular libraries available for virtualizing lists in React, such as React Virtualized and react-window. These libraries provide components like List or WindowScroller that dynamically render only the visible items while handling scrolling and window resizing efficiently.

Virtualization works by rendering a subset of items that are currently visible on the screen, and as the user scrolls, it dynamically replaces the off-screen items with new ones. This approach significantly reduces the rendering time and improves the overall performance of the application.

Optimize JavaScript Loops

Loops are a fundamental part of programming in any language, JavaScript being no exception, and optimizing them can have a significant impact on performance. Consider the following techniques to improve loop efficiency:

Use Traditional for Loops with length caching

When iterating over arrays or collections, traditional for loops outperform higher-order functions like forEach(). The reason is that for loops allow you to cache the length of the array and directly access elements by index, minimizing the overhead of function calls or iterator objects.

Caching the array length avoids re-evaluating the length in each iteration, resulting in improved performance.

const array = [1, 2, 3, 4, 5];
const length = array.length;
for (let i = 0; i < length; i++) {
  // Access array[i] and perform operations
}

Use for...in for Enumerating Object Properties

When working with objects, for...in loops allow you to iterate over enumerable properties. However, be cautious when using this loop with arrays, as it iterates over all properties, including inherited ones, which may not be desired.

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    // Access obj[key] and perform operations
  }
}

Avoid String Concatenation in Loops

String concatenation within loops can be a performance bottleneck due to the immutable nature of strings. In each concatenation operation, a new string instance is created, resulting in memory allocation and garbage collection overhead.

To optimize string concatenation, it’s recommended to use techniques like Array.join() or template literals (${}) outside the loop. By using these methods, you can avoid the creation of multiple intermediate string instances, leading to better performance.

For example, instead of concatenating strings in a loop:

let result = '';
for (let i = 0; i < array.length; i++) {
  result += array[i];
}

You can use Array.join() to concatenate strings:

const result = array.join(”);

Alternatively, you can leverage template literals for concise and efficient string concatenation:

let result = '';
for (let i = 0; i < array.length; i++) {
  result += `${array[i]}`;
}

Use Debouncing and Throttling

Event handling can impact performance, especially when dealing with events that trigger frequent callbacks. Techniques like debouncing and throttling help control the rate at which functions are invoked, preventing excessive function invocations and optimizing performance.

Debouncing limits the rate of function calls by delaying the execution until a certain period of inactivity has passed. This is particularly useful in scenarios like search inputs or scroll events, where you want to trigger a function after the user has stopped interacting.

Throttling, on the other hand, limits the number of times a function is called within a specified time interval. Throttling is useful for scenarios like mousemove or resize events, where you want to limit the frequency of function invocations to prevent overwhelming the browser with excessive computations.

Conclusion

The tips above are generic development-related tips for optimizing the performance of React applications. As each application has its own bottlenecks and potential optimizations it is crucial to continuously profile and measure the performance of your application to identify potential bottlenecks and areas for improvement.

Following these tips, monitoring and continuously optimizing application performance will not only help reduce the environmental impact of web applications but also increase overall user satisfaction and engagement as well.