Как лучше всего организовать работу с массивом матчей, требующим загрузки дополнительных данных для расчета статистики каждого матча в приложении React, учитывая, что массив может содержать до 5000 записей и необходимо минимизировать запросы к серверу, а также учитывая возможность хранить стационарные данные локально? Требуется ли для этого использование стейт-менеджера, и если да, то какой стейт-менеджер следует выбрать? Если стейт-менеджер необязателен, то какие подходы могут быть использованы вместо него?
Для эффективной обработки больших объемов данных в React можно использовать различные подходы. Для организации работы с массивом матчей, содержащим до 5000 записей, и загрузки дополнительных данных для расчета статистики каждого матча, можно рассмотреть следующие рекомендации: 1. Пагинация данных: разбить массив матчей на страницы и загружать только необходимую страницу при необходимости. Это позволит снизить нагрузку на сервер и улучшить производительность. 2. Локальное хранение данных: сохранять стационарные данные локально, например, в localStorage или IndexedDB, чтобы уменьшить количество запросов к серверу. 3. Использование мемоизации данных: можно применить мемоизацию данных с помощью библиотеки memoize-one или использовать мемоизированные селекторы в библиотеке Reselect для улучшения производительности при повторном вызове функций расчета статистики. 4. Использование стейт-менеджера: при работе с большими объемами данных рекомендуется использовать стейт-менеджер, такой как Redux или MobX, чтобы управлять состоянием приложения и упростить доступ к данным из различных компонентов. 5. Оптимизация рендеринга: использование PureComponent или React.memo для оптимизации рендеринга компонентов, чтобы избежать лишних перерисовок. В целом, выбор стейт-менеджера зависит от конкретных потребностей проекта и уровня сложности управления состоянием. Если в вашем приложении используется большое количество данных и сложная логика работы с ними, то стейт-менеджер может быть полезным инструментом. Однако, в некоторых случаях можно обойтись и без него, используя локальное состояние компонентов и контекст React для передачи данных между компонентами.
Путей решений большое количество, и они зависят от твоих хотелок.
Вариант а - с кульбитами, но я бы так сделал. Пишешь небольшой бекенд на экспрессе для своего приложения. На беке с помощью cron например раз в день/час/несколько минут делаешь запрос на нужное апи, записываешь в своей бд ответ. Вопрос с лимитом запросов решен. далее делаем пагинацию на своем сервере (очень простое действие) и отправляешь пользователю человеческий ответ по АПИ, который будет соответствовать всем твоим запросам и нуждам. На фронте остается допилить простое СПА без извращений и сложностей.
Вариант б - сохраняешь ответ на клиенте, обновляешь кеш раз за n-ное время, как предложено выше. В таком случае проще всего действительно использовать локалстор для хранения ответа по АПИ. Если хочется более продвинутой работы, обрати внимание на indexedDB -есть несколько интересных адаптеров для реакта, которые упрощают работу.
Вопрос с сохранением данных при переходе на другую страницу решается просто (я догадываюсь что под другой страницей ты подразумеваешь роутинг в react SPA). Это либо хранение состояния на верхнем уровне приложения, либо стейт менеджер. Внимание - стейт-менеджер только упрощает(!!!) обращение со сложным стейтом в относительно больших приложениях. Это не панацея, по факту он делает то же самое что и обычный хук стейта. Тебе скорее всего не принципиально, но при желании пришить условный zustand можно. Это вкусовщина.
Можно вообще написать кастомный хук для работы с локалстором/индекседДБ и юзать на каждой странице, считывая при заходе на каждую страницу данные и одновременно проверяя их "свежесть". Тогда стейт менеджеры точно не нужны от слова совсем.