МETHOD FOR INCREASING THE PERFORMANCE OF A WEB APPLICATION IN THE REACT FRAMEWORK ECOSYSTEM

Abstract

The article describes the available methods for improving the performance of a web application in the React framework ecosystem, their advantages and disadvantages, in particular, the use of React.memo, PureComponent, shouldComponentUpdate, Lazy Loading, Code Splitting and memoization of selectors. An optimized method is proposed, which allows to reduce the program execution time by an average of 17%. The main idea of the proposed method is to divide the state into atomic fragments. Each entity has its own state fragment that isolates it from others. These fragments are used by the React Context API to pass entity configuration, including data and functions to modify it. The Context API is used to provide stateful application-wide handling. The state is divided into atomic fragments, which allows their isolation. These fragments are accessed and modified using the hook function. Components that use this method automatically respond to state changes and are updated if the state has changed. The main advantage of this approach is the possibility of using the closing technology and transferring the function of state handlers. The proposed method is based on an approach that was borrowed from the Recoil library. This approach is similar to the standard hook functions in the React framework, for which the proposed method was developed. The advantages and disadvantages of using popular state management libraries in web applications were discussed. The goal of the modification was to avoid redundant operations when the current and new states are indistinguishable, to improve performance when adding large numbers of items, and to allow similar parts of the code to be used multiple times. Special attention is paid to the problem of redundant operations, which occurs when all components subscribed to a state change are automatically updated, even if the state values themselves have not changed. Added the ability to check the equality of states before updating them, which allows to save resources and preserve performance. Also implemented simplified handling of state change functions so that they can be used again without repeating code.