У меня есть API, который выбирает имена (имена пользователей), основанные на стране где-то вдоль.
/names/{countryName}
, а пользовательский интерфейс имеет две вкладки - Australia и India. Для этого я использую вкладки пользовательского интерфейса материала в реагировании.
Как только пользователь нажимает на Индию, он вызывает /names/India и выбирает список имен (около 200). Точно так же это касается Австралии.
Когда звонят на сервер, я показываю загрузчик во внешнем интерфейсе. Затем я сохраняю результат в объекте с именем names в состоянии. names['India'] и names['Australia'] - это массив из 200 значений каждый. Эти имена показаны в таблице с именами и случайным образом, сгенерированным из имен. И все это работает нормально.
Проблема начинается, когда пользователь переключает вкладки назад и вперед. Поскольку данные уже находятся в состоянии, новый вызов не производится. Но даже тогда рендеринг идет медленно. Он остается на старой вкладке до тех пор, пока данные в новой вкладке не будут отображены, и только затем переключается на новую вкладку, что вводит в заблуждение конечного пользователя.
Я думал об использовании react-window-infinite-loader, но это более полезно, когда вы выбираете данные страница за страницей, и API возвращает вам данные таким образом. Но сейчас все равно есть данные о состоянии. Почему на рендеринг уходит так много времени, как я могу избежать этого?