liu.seSearch for publications in DiVA
System disruptions
We are currently experiencing disruptions on the search portals due to high traffic. We are working to resolve the issue, you may temporarily encounter an error message.
Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • oxford
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf
Performance testing Redux in React applications
Linköping University, Department of Computer and Information Science, Human-Centered systems.
2019 (English)Independent thesis Advanced level (degree of Master (Two Years)), 20 credits / 30 HE creditsStudent 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-156250ISRN: LIU-IDA/LITH-EX-A–18/052–SEOAI: oai:DiVA.org:liu-156250DiVA, 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
Available from: 2020-06-23 Created: 2019-04-09 Last updated: 2020-06-23Bibliographically approved

Open Access in DiVA

No full text in DiVA

Search in DiVA

By author/editor
Ulander, Alexander
By organisation
Human-Centered systems
Software Engineering

Search outside of DiVA

GoogleGoogle Scholar

urn-nbn

Altmetric score

urn-nbn
Total: 651 hits
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • oxford
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf