Пишем библиотеку для виртуального скролла с нуля | React | часть 2

[@АнатолийГорбов-о1ь]

Очень нравится контент на канале, особенно про разные практические реализации, спасибо!

[@ayub_begimkulov]

Спасибо за фидбэк!

[@Максим-д1у4щ]

Большое спасибо за видео! Ждем дальше!

[@ayub_begimkulov]

Рад, что понравилось!

[@SamSiMmP]

Спасибо большое

[@sergeyfrantsev4449]

Вдохновляеш мЭЭЭЭЭН)!
Спасибо за видосы!

[@НикитаШевченко-ы8я]

Как всегда полезный видос, спасибо большое!

[@bapydev]

сииильнныыый разбор, спасибо!))

[@Victor-il9gm]

Огонь контент! спасибо большое!!

[@ayub_begimkulov]

Рад, что понравилось!

[@artyomtaranenko2267]

Интересная тема, хоть я так ни разу не сталкивался и, скорее всего, выбрал бы либу

[@baileysli6235]

Я один раз сталкивался и набросал своё решение, просто потому что я не знал про виртуальный скроллинг, но при этом логически до него догадался. Плюс мне не подходили стандартные практики, потому что нужен был поиск по странице (CTRL F), поэтому те строки таблицы, что пользователь не видел состояли из одной ячейки, а те что видел были полноценной вьюшкой

[@ayub_begimkulov]

Ну да, это видео больше для понимания того, что там под капотом творится.

[@v.demchenko]

топ

[@ayub_begimkulov]

Спасибо!

[@ОтабекБег]

Удачи

[@ayub_begimkulov]

Спасибо!

[@yuridukhanin19]

Привет. Тема не банальная, это радует.
Можешь ещё ролик снять с бесконечной лентой по подгрузки динамически элементов со стороны api

[@RdmHeroe]

инфинити скролл - не банально?)

[@ayub_begimkulov]

Привет! Обычно добавляют обработчик onRenderEnd, который вызывается, когда человек дошел до низа текущего списка. И там уже догружают элементы. В готовых решениях все это обычно есть. Или ты хотел, чтобы мы в кастомное добавили?

[@yuridukhanin19]

@@ayub_begimkulov а почему не через IntersectionObserver?

[@rustamakhmetyanov4404]

​@@ayub_begimkulovтож интересует такая тема, надо ещё при этом учитывать примененные к списку фильтры, и то что например когда юзер открывает карточку товара из списка и возвращается назад как именно ему показать список, как все это сохранять и следить за всем))

[@LRXAORLOV]

А как сделать поиск по такому листу ? Чтобы была подсветка текста и скрол к следующему подходящему результату ?

[@GrowProgHunter]

Топ

[@ayub_begimkulov]

Спасибо!

[@IT-therapy]

Аюб, был рад увидеть такое видео на канале, учитывая что это моя рабочая таска.. все работает, но вот когда 1-6 сообщений, ничего не видно , пока не сделаю размер экрана с высоту всех сообщений. Я уже третий день тыкаюсь в разные варианты , не могу найти готовую реализацию для чата… шо делать ?

[@ayub_begimkulov]

Привет! А почему в сторону готовых решений не посмотрел? @tanstack/virtual могу рекомендовать.
А так в 3-й части я это фиксил.

[@IT-therapy]

@@ayub_begimkulov пришел в итоге к этому решению )

[@Joi-w2t]

скажите пожалуйста, к какому уровню относится данная практика? Теория то ладно, но например тот же Джун должен уметь написать это сам с нуля сам?

[@ayub_begimkulov]

Нет, Джун не должен уметь. Уровень тут точно начиная от сильного мидла)

[@fedordostoevskiy4209]

👏👏👏

[@ummyusuf8206]

🎉🎉🎉🎉🎉

[@HEX_CAT]

❤🎉😊

[@sololive352]

у тебя пропадает весь список, если проскролить до конца

[@ayub_begimkulov]

Да, поправил в 4-й части. Там чут-чуть логика с индексами поменяться должна. Можно вот тут посмотреть: github.com/Ayub-Begimkulov/youtube-tutorials/blob/master/virtualization-from-scratch/src/examples/Grid.tsx#L251-L288

[@njkzbby6174]

Жду комментарий Максима тут

[@ayub_begimkulov]

Вроде написал уже)

[@МарияЧерешня-у2й]

🎉🎉🎉🎉🎉