React.lazy и React.Suspense, зачем? #94 - ReactJS

https://it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.


Поддержать меня можно на patreon   / itkamasutra   или оформив спонсорство на данном канале.

Помогайте друг другу вот здесь: https://t.me/reactjs_samurai
API: https://social-network.samuraijs.com/

Самураи, привет. Зачем нужен React.lazy???
Ответ: чтобы в основной bundle (собранный для браузера большой общий js-файл) не попадали некоторые компоненты, которые с большой вероятностью не будут посещены большинством пользователей. А значит можно уменьшить размер итоговой сборки, чтобы ускорить стартовую загрузку всего приложения.

А тем компоненты, которые мы import-ируем лениво (React.lazy), они будут собраны в другие сборки-файлики и подгружены будут по сети по мере надобности. А может и вовсе не будут, если этой надобности не будет. Факт: мы загружаем только то, что нужно. А то что не загрузили, но оно понадобилось - подгрузим лениво в момент необходимости.

Да, пользователь из-за ленивой подгрузки контента (React.lazy) в момент обращения будет видеть ПУСТОТУ... Потому что React-у нечего отобразить...

Чтобы не было этой пустоты и пользователь понимал, что данные (а именно компоненты) грузятся - мы должны показать какую-то заглушку (fallback)... Для этого и нужен нам компонент React.Suspense

Летим, самураи!!!

Уроки по React JS:    • Курс "React JS - путь самурая 1.0", у...  


Сайты:
https://it-kamasutra.com
https://it-incubator.eu
https://samuraijs.com



Мы в соц. сетях:
https://vk.com/itkamasutra
  / itkamasutra  
https://telegram.me/itkamasutra

Мои личные VK и Insta:
https://vk.com/d.kuzyuberdin
  / it.kamasutra.dimych  

#lazy #suspense #reactjs #практика #пример #уроки #курс