Объединение виртуализации с загрузкой данных

Бесконечная прокрутка загружает дополнительные данные, когда пользователь приближается к концу списка, вместо постраничной навигации с явными кнопками страниц. В сочетании с виртуализацией она позволяет плавно просматривать огромные наборы данных.

Список отображает только видимые строки, пока новые данные загружаются в фоновом режиме непосредственно перед тем, как пользователь достигнет нижней границы.

Компоненты списков react-window принимают обратный вызов onItemsRendered, сообщающий, какие индексы элементов сейчас отрисованы. Он предоставляет индексы начала и конца видимой области и буферной области предварительной отрисовки.

Этот обратный вызов даёт Вам возможность отслеживать прокрутку и определять, насколько далеко пользователь прокрутил список, не подключая необработанные события прокрутки.

Чтобы понять, когда загружать данные, сравните overscanStopIndex из onItemsRendered с текущим itemCount. Когда отображаемое окно приближается к концу загруженных данных, требуются дополнительные данные.

Использование индекса конца буферной области даёт небольшой запас времени и запускает загрузку немного раньше, чем пользователь действительно достигнет самой последней строки.

Когда индекс конца пересекает порог, например оказывается в пределах одного экрана от itemCount, вызывайте функцию загрузки следующей страницы. Защитите этот вызов, чтобы не отправлять несколько перекрывающихся запросов.

Флаг загрузки или проверка того, выполняется ли уже загрузка, предотвращает дублирование запросов, пока пользователь прокручивает список через зону запуска.

Удобный приём — задавать itemCount равным числу загруженных элементов плюс один, пока существуют дополнительные данные. В дополнительной строке отображается индикатор загрузки, сообщающий о том, что идёт загрузка.

Когда новые данные поступают, количество элементов увеличивается, а строка с индикатором заменяется настоящим содержимым, обеспечивая плавную визуальную обратную связь.

Дополнительный пакет react-window-infinite-loader берёт эту логику на себя. Вы передаёте ему isItemLoaded, loadMoreItems и itemCount, а он вызывает Ваш загрузчик, когда пользователь прокручивает список к незагруженным строкам.

Пакет отслеживает, какие диапазоны загружены, и предотвращает повторные вызовы загрузки, упрощая создание надёжной бесконечной прокрутки.

Для незагруженных индексов можно отображать строки-заполнители или скелетные строки вместо пустых областей. Функция отрисовки проверяет, загружен ли элемент по определённому индексу, и показывает скелетную строку, если это не так.

Скелетные строки сохраняют компоновку и показывают ход загрузки, поэтому во время ожидания следующей страницы они воспринимаются лучше, чем пустое пространство.

Загрузка может завершиться ошибкой, поэтому обрабатывайте ошибки корректно. В конце можно отобразить специальную строку ошибки с кнопкой повторной попытки, которая снова вызывает функцию загрузки для диапазона, завершившегося ошибкой.

Это сохраняет работоспособность списка после сбоя и даёт пользователю понятный способ продолжить работу без перезагрузки всей страницы.

Бесконечные списки обычно используют один из двух распространённых способов пагинации. Пагинация со смещением запрашивает данные по номеру страницы или количеству пропускаемых элементов, а пагинация по курсору — элементы после непрозрачного курсора, указывающего на последний просмотренный элемент.

Пагинация по курсору обычно надёжнее для динамически изменяющихся данных, поскольку предотвращает смещения и дублирование, которые могут возникать при вставке элементов в списках со смещением.

React Query и useInfiniteQuery естественно сочетаются с виртуализацией. Они управляют загруженными страницами, следующим курсором, состояниями загрузки и ошибок, а react-window эффективно отображает объединённые страницы.

Вы объединяете страницы в один массив для списка и вызываете fetchNextPage при достижении порога из onItemsRendered, получая кэширование и повторные попытки без дополнительных усилий.

Определите, когда загружать дополнительные данные в виртуализированном списке с бесконечной прокруткой.

Бесконечная прокрутка загружает страницы, когда пользователь приближается к концу. onItemsRendered сообщает индексы, а сравнение overscanStopIndex с itemCount показывает, когда нужно загружать данные, с защитой от дублирования запросов.

Используйте строки-заполнители и строки ошибок, react-window-infinite-loader для отслеживания состояния, а для динамических данных — пагинацию по курсору. React Query и useInfiniteQuery управляют страницами, курсорами и состояниями наряду с отображением через react-window.