Optimising performance in React apps
Diwan, Neeta (2024)
2024
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2024051311354
https://urn.fi/URN:NBN:fi:amk-2024051311354
Tiivistelmä
App performance is a critical aspect of app development. For an app to be performant, it must provide uninterrupted user-interactions and smooth UI transitions. Although ReactJS is capable of building efficient user interfaces, it takes implementing ReactJS the right way to avoid performance issues.
The purpose of this study is to present app performance optimizing techniques to manage component renders and commonly encountered issues caused by rerenders as well as the amount of render time. In order to mitigate app performance problems, techniques such as memoization and code splitting are known to be efficient and effective. The intent of the study is to make use of these approaches and thus experiment with lazy loading and performance hooks, useMemo and useCallback, provided by ReactJS to optimize app performance.
The study provides insights into identifying and minimizing performance issues by using the techniques mentioned above. A description of React rendering mechanism is also introduced in this thesis. React developer tool Profiler is used to evaluate app performance.
The study results show that optimising React app with useMemo, useCallback and lazy loading techniques improves render duration and loading time. Considering that the given app is data heavy with computations that involves working with large lists, the results from this study could be used as a reference to estimate the responsiveness of data-consuming React apps. The study identifies that the effectiveness of these techniques and performance of React app also depends on how the app is structured and the amount of data and computationally expensive operations it is performing.
The purpose of this study is to present app performance optimizing techniques to manage component renders and commonly encountered issues caused by rerenders as well as the amount of render time. In order to mitigate app performance problems, techniques such as memoization and code splitting are known to be efficient and effective. The intent of the study is to make use of these approaches and thus experiment with lazy loading and performance hooks, useMemo and useCallback, provided by ReactJS to optimize app performance.
The study provides insights into identifying and minimizing performance issues by using the techniques mentioned above. A description of React rendering mechanism is also introduced in this thesis. React developer tool Profiler is used to evaluate app performance.
The study results show that optimising React app with useMemo, useCallback and lazy loading techniques improves render duration and loading time. Considering that the given app is data heavy with computations that involves working with large lists, the results from this study could be used as a reference to estimate the responsiveness of data-consuming React apps. The study identifies that the effectiveness of these techniques and performance of React app also depends on how the app is structured and the amount of data and computationally expensive operations it is performing.