React Intersection Observer (scroll + lazy-load картинок)

Представьте, что вам нужно определить, что какой-то конкретный попал в область вашего экрана на 10% или 100%, после чего необходимо выполнить какое-то действие? Например, анимировать элемент.

React Intersection Observer идеально справится с этой задачей!

Нужно определить, что пользователь дошел до конечного скролла? Юзай Intersection Observer.

Нужно сделать ленивую подгрузку картинок? Вперёд вместе с React Intersection Observer!

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

⏰ Таймкоды:
00:00:00 Введение
00:50:00 Делаем неправильно с помощью scroll
05:25:00 Что такое Intersection Observer
10:25:00 Делаем правильно с помощью React Intersection Observer
15:04:00 Делаем ленивую подгрузку картинок

🔗 Следите за обновлениями и информацией в:
— Telegram-канале: https://t.me/archakov_im
— VK: https://vk.com/archakov_im
— Личном блоге: https://archakov.im
— GitHub: https://github.com/Archakov06
— Моё резюме: https://career.habr.com/archakovim

#react #scroll #intersectionobserver #observer #js #javascript #junior #реакт #разработка