Optimization in React.js: Methods, Tools, and Techniques to Improve Performance of Modern Web Applications

Abstract

The complexity of modern web applications leads to increased performance demands to succeed in the competitive market. For example, the complexity and the number of commonly used libraries leads to slower page loading times. Furthermore, the number of slow Document Object Model (DOM) operations increases in single-page applications (SPA), which are currently trending. While the leading JavaScript library, React.js, includes multiple optimization methods, such as virtual DOM, the responsibility of further optimization is left to the developers. This paper examines which techniques, methods, and tools can be utilized in React.js ecosystem to increase the performance of a web application. The used research method is literary analysis. As a result of the literary analysis, the current best optimization techniques, methods and tools are listed, such as decreasing the number of re-renders through best practices of React.js state management and memoization, decreasing loading times, and handling compute-intensive tasks with multithreading and memoization. Furthermore, the overview of the optimization methods in React.js illustrates different techniques. However, some methods require a more custom implementation and thus general concepts, such as HTML5 Web Workers API and Webpack module bundler, are reviewed. Since the presented examples are general and the performance benefits of combinations of the reviewed methods is not predictable, performance profiling through browser developer tools and React.js Profiler component is also introduced. Performance profiling can be used to gain an understanding for the need of optimization and to analyse the actual benefits gained from utilizing the optimization techniques, methods, and tools.