Analysis of modern optimization methods in "React"

Cover Page

Cite item

Full Text

Abstract

The article presents a comprehensive analysis of performance optimization methods for React applications: memoization (React.memo, useMemo, useCallback), list virtualization (react window, react virtualized), code splitting (React.lazy, Suspense), optimizing the Context API, and new capabilities of React 18 (automatic batching, Concurrent Mode). The analysis and performance data are based on various existing scientific research as well as the documentation of the optimization methods themselves. Developers are recommended to use the React Profiler API and Chrome Performance for measuring the performance of React applications. A test SPA with dynamic data filtering and three rendering options has been developed. Using the React Profiler API, the processing time for 1,000 to 20,000 elements was measured ten times, followed by statistical processing. The methodology includes a comprehensive theoretical analysis, an examination of the mechanisms of various optimization methods, and their impact on performance. The scientific novelty of the article lies in the comprehensive analysis and practical comparison of key approaches to optimization within the React framework. The practical significance of the work is justified by the fact that the results can be directly used in commercial software development. Additionally, the article conducts an experimental comparison of list virtualization libraries using a computer experiment, followed by statistical analysis. The results showed that react window provides up to a 95% increase in speed and stability under increasing load, while react virtualized offers enhanced functionality at the cost of slightly higher latency, as confirmed by other studies. The article contains not only a theoretical description but also practical examples that reveal optimization methods in real applications, which confirms its practical significance.

References

  1. Iseal, S. Edge Computing and React: Enhancing Performance at the Edge. – 2025. – С. 24.
  2. Сугаипов, С. А. А., Гериханов, З. А. Оптимизация веб-разработки с помощью React, Angular и Vue // Тенденции развития науки и образования. – 2023. – № 98-10. – С. 141-143. – doi: 10.18411/trnio-06-2023-565. – EDN HYNKWA.
  3. Veeranjaneyulu, V. Performance Optimization Techniques in React Applications: A Comprehensive Analysis // International Journal of Research in Computer Applications and Information Technology. – 2024. – Т. 7, № 2. – С. 1165-1177.
  4. Савкин, С. С., Логвинов, Д. В. Оптимизационные возможности JavaScript-библиотеки REACT 18 // Вызовы глобализации и развитие цифрового общества в условиях новой реальности: сборник материалов IV Международной научно-практической конференции, Москва, 19 декабря 2022 года. – Москва: Алеф, 2022. – С. 126-129. – doi: 10.34755/IROK.2022.97.75.019. – EDN ALNIUP.
  5. Чэнь, К. Improving Front-end Performance through Modular Rendering and Adaptive Hydration (MRAH) in React Applications. – 2025. – Режим доступа: https://arxiv.org/abs/2504.03884, свободный.
  6. Toprak, Ahmet, Toprak, Feyzanur. Improving and Optimizing React Web Applications: Strategies and Techniques. – 2025. – С. 17.
  7. Пирюшов, А. С., Пирюшов, М. С. Сравнительный анализ времени рендеринга компонентов при использовании различных инструментов управления состояниями в React-приложениях // Международный журнал информационных технологий и энергоэффективности. – 2024. – Т. 9, № 3(41). – С. 79-87. – EDN KPOFLF.
  8. Ким, А. Оптимизация ре-рендеринга компонентов инструментами React // Научно-технические инновации и веб-технологии. – 2022. – № 1. – С. 4-10. – EDN JHYSXA.
  9. Dudak, A. Optimization of loading and performance in SPA on React // Тенденции развития науки и образования. – 2024. – № 116-19. – С. 183-187. – doi: 10.18411/trnio-12-2024-899. – EDN JJQMMK.
  10. Iseal, S. Performance Benchmarking Techniques for React Applications. – 2025. – С. 14.
  11. Кравцов, Е. П. Разработка высокопроизводительных React-приложений: методы и практики оптимизации // European science. – 2024. – № 1 (69).
  12. Яровая, Е. В. Нестандартные архитектура в написание веб приложений // Столыпинский вестник. – 2022.
  13. Dubaj, S., Pańczyk, B. Comparative of React and Svelte programming frameworks for creating SPA web applications // Journal of Computer Sciences Institute. – 2022. – Т. 25. – С. 345-349. – doi: 10.35784/jcsi.3020. – EDN AYUSVM.
  14. Karić, A., Durmić, N. Comparison of JavaScript Frontend Frameworks-Angular, React, and Vue // International Journal of Innovative Science and Research Technology (IJISRT). – 2024. – С. 1383-1390. – doi: 10.38124/ijisrt/ijisrt.
  15. Kasenda, R., Tenda, J., Iman, E., Manantung, J., Moekari, Z., Pantas, M. The Role and Evolution of Frontend Developers in the Software Development Industry // Jurnal Syntax Admiration. – 2024. – Т. 5. – С. 5191-5196. – doi: 10.46799/jsa.v5i11.1852.
  16. Karka, Narender. Front-End Performance Optimization: A Comprehensive Guide // International Journal of Scientific Research in Computer Science, Engineering and Information Technology. – 2025. – Т. 11. – С. 83-100. – doi: 10.32628/CSEIT251112389.
  17. Mathew, Prakash. Front-End Performance Optimization for Next-Generation Digital Services // Journal of Computer Science and Technology Studies. – 2025. – Т. 7. – С. 993-1000. – doi: 10.32996/jcsts.2025.7.4.111.
  18. Yan, Fenglong, Xu, Zhao, Zhong, Yu, HaiBei, Zhang, Ge, Chang. Research on Performance Optimization Scheme for Web Front-End and Its Practice. – 2021. – doi: 10.1007/978-981-15-8411-4_118.
  19. Saks, E. JavaScript frameworks: Angular vs React vs Vue. – 2019.
  20. Paakkanen, J. Upcoming JavaScript Web Frameworks and Their Techniques. – LUT University, 2022. – 62 с.

Supplementary files

Supplementary Files
Action
1. JATS XML
Download

Согласие на обработку персональных данных с помощью сервиса «Яндекс.Метрика»

1. Я (далее – «Пользователь» или «Субъект персональных данных»), осуществляя использование сайта https://journals.rcsi.science/ (далее – «Сайт»), подтверждая свою полную дееспособность даю согласие на обработку персональных данных с использованием средств автоматизации Оператору - федеральному государственному бюджетному учреждению «Российский центр научной информации» (РЦНИ), далее – «Оператор», расположенному по адресу: 119991, г. Москва, Ленинский просп., д.32А, со следующими условиями.

2. Категории обрабатываемых данных: файлы «cookies» (куки-файлы). Файлы «cookie» – это небольшой текстовый файл, который веб-сервер может хранить в браузере Пользователя. Данные файлы веб-сервер загружает на устройство Пользователя при посещении им Сайта. При каждом следующем посещении Пользователем Сайта «cookie» файлы отправляются на Сайт Оператора. Данные файлы позволяют Сайту распознавать устройство Пользователя. Содержимое такого файла может как относиться, так и не относиться к персональным данным, в зависимости от того, содержит ли такой файл персональные данные или содержит обезличенные технические данные.

3. Цель обработки персональных данных: анализ пользовательской активности с помощью сервиса «Яндекс.Метрика».

4. Категории субъектов персональных данных: все Пользователи Сайта, которые дали согласие на обработку файлов «cookie».

5. Способы обработки: сбор, запись, систематизация, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передача (доступ, предоставление), блокирование, удаление, уничтожение персональных данных.

6. Срок обработки и хранения: до получения от Субъекта персональных данных требования о прекращении обработки/отзыва согласия.

7. Способ отзыва: заявление об отзыве в письменном виде путём его направления на адрес электронной почты Оператора: info@rcsi.science или путем письменного обращения по юридическому адресу: 119991, г. Москва, Ленинский просп., д.32А

8. Субъект персональных данных вправе запретить своему оборудованию прием этих данных или ограничить прием этих данных. При отказе от получения таких данных или при ограничении приема данных некоторые функции Сайта могут работать некорректно. Субъект персональных данных обязуется сам настроить свое оборудование таким способом, чтобы оно обеспечивало адекватный его желаниям режим работы и уровень защиты данных файлов «cookie», Оператор не предоставляет технологических и правовых консультаций на темы подобного характера.

9. Порядок уничтожения персональных данных при достижении цели их обработки или при наступлении иных законных оснований определяется Оператором в соответствии с законодательством Российской Федерации.

10. Я согласен/согласна квалифицировать в качестве своей простой электронной подписи под настоящим Согласием и под Политикой обработки персональных данных выполнение мною следующего действия на сайте: https://journals.rcsi.science/ нажатие мною на интерфейсе с текстом: «Сайт использует сервис «Яндекс.Метрика» (который использует файлы «cookie») на элемент с текстом «Принять и продолжить».