Анализ современных методов оптимизации в React

Обложка

Цитировать

Полный текст

Аннотация

В статье проведён комплексный анализ методов оптимизации производительности React приложений: мемоизации (React.memo, useMemo, useCallback), виртуализации списков (react window, react virtualized), разделения кода (React.lazy, Suspense), оптимизации Context API и новых возможностей React 18 (автоматический батчинг, Concurrent Mode). Приведённый анализ и данные о производительности основываются на различные научные исследования, а также на документацию самих методов оптимизации. Для измерения производительности React приложений разработчикам рекомендуется использовать React Profiler API и Chrome Performance. Разработано тестовое SPA с динамической фильтрацией данных и трёх вариантами рендеринга. С помощью React Profiler API измерено время обработки от 1 000 до 20 000 элементов десять сходящихся раз с последующей статистической обработкой. Методология включает комплексный теоретическое анализ, разбор механизмов различных методов оптимизаций обновлений и их влияние на производительность. Научная новизна статьи заключается в комплексном анализе и практическом сравнении ключевых подходов к оптимизации во фреймворке React. Практическая значимость работы обосновывается тем, что результаты могут быть использованы непосредственно в коммерческой разработке программного обеспечения. Также в статье было проведено экспериментальное сравнение библиотек виртуализации списков с использованием компьютерного эксперимента, с последующим статистическим анализом. Результаты показали: react window обеспечивает до 95 % прироста скорости и стабильность при росте нагрузки, а react virtualized предлагает расширенный функционал ценой слегка большей латентности, что подтверждается другими исследованиями. Статья содержит не только теоретическое описание, но и практические примеры, раскрывающие способы оптимизации в реальных приложениях, что подтверждает практическую значимость.

Об авторах

Евгений Алексеевич Ратушняк

Национальный исследовательский университет ИТМО

Email: evgrat123@mail.ru
ORCID iD: 0009-0006-3609-4194
студент; факультет программной инженерии и компьютерной техники;

Список литературы

  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 с.

Дополнительные файлы

Доп. файлы
Действие
1. JATS XML
Скачать

Согласие на обработку персональных данных

 

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