Performance testing Redux in React applications
2019 (English) Independent thesis Advanced level (degree of Master (Two Years)), 20 credits / 30 HE credits
Student thesis
Abstract [en]
This thesis presents different factors for reduced mount and update performance when Redux is adapted into a React application. It also showcases various performance pitfalls to look out for in React-Redux applications. Theory behind React, Redux and React performance testing is described, along with how to integrate them with each other. This theory is also put into practice as a React application is built. The same application is then implemented with Redux, which results in two separate React applications. Performance tests using Perf, User Timing API and Chrome DevTools were then performed on various components during application mount and update time for both React projects. The application saw an initial mount time increase between 9 to 15 %, depending on what page was rendered. This increase was due to the initialization of the Redux store and the process of connecting components to it. High order components saw little difference in update time, while low order components suffered the most. The major factor to high update times were discovered to be the structure of the low order component’s parent components, and whether or not the parent components’ children had implemented proper prop checks in shouldComponentUpdate(). This was due to the fact that without Redux, components could simply update themselves. Redux, on the other hand, forces updating low order components to update Redux’s store, which in turn has to pass new state props back down the component chain. Hence, choosing which component to become connected to the store was proven to be crucial for update performance. The shallow equal comparison forced by Redux’s connect function was also discovered to add to update performance, especially for state objects with larger key sets. Instead, it was proposed for React to add the option to choose what props should be subject to this comparison for each component, and how many levels deep it should be performed for nested objects. This would make the equation avoid performing heavy operations on props which the programmer knows are not subject to change.
Place, publisher, year, edition, pages 2019. , p. 49
Keywords [en]
React, Redux, Performance, Redux form, Perf, User Timing API, Chrome DevTools, Benchmark testing, Regression testing, OLTP, Bookster, Booking application, State handling, Mount time, Update time, High order component, Low order component, Container component, Presentational component, Form component
National Category
Software Engineering
Identifiers URN: urn:nbn:se:liu:diva-156250 ISRN: LIU-IDA/LITH-EX-A–18/052–SE OAI: oai:DiVA.org:liu-156250 DiVA, id: diva2:1303345
Subject / course Information Technology
Presentation
2018-11-30, Herbert Simon, Linköping Universitet, E-huset, Linköping, 15:00 (English)
Supervisors
Examiners
2020-06-232019-04-092020-06-23 Bibliographically approved