React Concurrent Mode: mechanisms, patterns and application
Pham, Hung Anh (2023)
2023
Master's Programme in Computing Sciences
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2023-04-28
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-202304103560
https://urn.fi/URN:NBN:fi:tuni-202304103560
Tiivistelmä
Single page applications are becoming a popular alternative to traditional websites or desktop or mobile applications due to their dynamicity and cross-platform capabilities. The rise of single page applications is in sync with the rise of libraries and platforms that support developing such applications, one of which is React, a popular framework developed and maintained by Facebook and open-source developers worldwide. Recently, new versions of React are released with one significant update - Concurrent Mode, which promises to improve React applications’ performance and user experience, therefore providing better services for customers.
This thesis focuses on Concurrent Mode as a solution to the current issues in React appli- cations development, and how Concurrent Mode solves it using its features. Concurrent Mode usage patterns and adoption in a React application are also discussed. To gain better insights into its potential impact on a real application, Concurrent Mode is enabled in an in-development React project, whose differences in performance will be measured before and after the adoption of Concurrent Mode. Evolution of Concurrent Mode, from an experimental set of features, to a more matured version shipped with React, is also documented.
The primary finding of the experiment with the React application is a clear, significant improve- ment in the application’s UI rendering performance. However, Concurrent Mode was not utilised fully due to the application’s architecture not being compatible with all of Concurrent Mode’s fea- tures. To be able to take full advantage of Concurrent Mode, refactoring work would be required. This issue might also translate to the real world when current applications want to use Concurrent Mode to improve their performance. Couple this with its immaturity and lack of interoperability with current platforms, the effect of Concurrent Mode on applications is limited. However, Con- current Mode’s undeniable potential means that more development and contribution should be encouraged, which would advance its maturity and compatibility in the React development scene.
This thesis focuses on Concurrent Mode as a solution to the current issues in React appli- cations development, and how Concurrent Mode solves it using its features. Concurrent Mode usage patterns and adoption in a React application are also discussed. To gain better insights into its potential impact on a real application, Concurrent Mode is enabled in an in-development React project, whose differences in performance will be measured before and after the adoption of Concurrent Mode. Evolution of Concurrent Mode, from an experimental set of features, to a more matured version shipped with React, is also documented.
The primary finding of the experiment with the React application is a clear, significant improve- ment in the application’s UI rendering performance. However, Concurrent Mode was not utilised fully due to the application’s architecture not being compatible with all of Concurrent Mode’s fea- tures. To be able to take full advantage of Concurrent Mode, refactoring work would be required. This issue might also translate to the real world when current applications want to use Concurrent Mode to improve their performance. Couple this with its immaturity and lack of interoperability with current platforms, the effect of Concurrent Mode on applications is limited. However, Con- current Mode’s undeniable potential means that more development and contribution should be encouraged, which would advance its maturity and compatibility in the React development scene.