Optimizing the productivity of solutions built with the help of ReactJS and D3 libraries

Abstract

Problem. Recently, the problem of the performance of web applications has become particularly acute. This is due to the complexity of the software and the simultaneous deterioration of the code quality. The work considers important aspects of performance of the client part of the web application, built using the ReactJS and D3 libraries. React is known to deliver a faster user interface than most competitors, thanks to its in-house, performance-oriented development approach. However, when your React application starts to scale, you may notice some performance issues or lag. Internal optimization methods may not be sufficient to support the growing traffic and complexity of a fast-paced, enterprise-level application. This is where the question arises: "How to improve performance in ReactJS?". Next, the article will consider important aspects of the performance of the client part of the web application, built using the ReactJS and D3 libraries. Goal. The purpose of the article is to develop a React component (optimized by a new method) in the form of a graph, whose data changes in real time. Methodology. Analytical research methods and functional programming methodology were used. Results. The paper considers the problem of optimizing a component built using ReactJS and D3. Its feature is the change of state in real time. A new code optimization method is proposed, which allows to minimize the number of renders. The proposed solutions will enable to more effectively use all the capabilities of the D3 functionality when designing a wide range of monitoring and billing systems and automated process management systems. Originality. A method is proposed that will help improve the performance of the React application and reduce the number of re-renders. The method is developed using additional React hooks and using a reference to the current graphic component from the parent. The method is based on the fundamental property of the D3 library - saving its own state  this allows you to get rid of unnecessary renders. Practical value. The proposed solutions will allow you to use all the functionality of D3 when designing a wide range of monitoring and billing systems and automated process management systems. D3 has the flexibility to display a large layer of diverse data and allows data visualization using HTML, SVG and CSS.