Optimizing re-rendering in web applications: problem analysis and a React-based solution

The article investigates the issue of excessive re-rendering in modern web applications, particularly in React-based applications, which leads to performance degradation and a diminished user experience. The study analyzes major JavaScript frameworks (React, Vue, Angular) and their approaches to managing DOM updates. Special attention is given to the mechanisms of virtual DOM, reconciliation, and diffing algorithms in React, as well as the problem of unnecessary component re-renders. A comprehensive approach has been developed to optimize the rendering process of web applications developed on the basis of a modern JavaScript framework, which takes into account multiple factors when making decisions about updating components. It allows minimizing repeated renderings and generally increasing the performance of the entire system. A prioritization model for optimizing repeated rendering is proposed, based on evaluating component visibility, importance, and nesting level using weighted coefficients. The model reduces unnecessary re-renders, optimizing computational resource usage. A comparative performance analysis with and without optimization demonstrates a slight reduction in average rendering time (from 7.50 ms to 7.37 ms) and a decrease in peak memory usage (from 64 MB to 61 MB). The advantages of the proposed results compared to existing methods, such as React.memo or useMemo, lie in the comprehensive approach to prioritization, which takes into account not only dependencies, but also the context of component usage. The prospects for adapting the model for other frameworks (Vue.js, Angular) and integrating with new technologies, such as WebAssembly, are identified. The research lays the foundation for further development of methods for optimizing rendering in web applications.