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

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
Самураи, привет. Зачем нужен React.lazy???
Ответ: чтобы в основной bundle (собранный для браузера большой общий js-файл) не попадали некоторые компоненты, которые с большой вероятностью не будут посещены большинством пользователей. А значит можно уменьшить размер итоговой сборки, чтобы ускорить стартовую загрузку всего приложения.
А тем компоненты, которые мы import-ируем лениво (React.lazy), они будут собраны в другие сборки-файлики и подгружены будут по сети по мере надобности. А может и вовсе не будут, если этой надобности не будет. Факт: мы загружаем только то, что нужно. А то что не загрузили, но оно понадобилось - подгрузим лениво в момент необходимости.
Да, пользователь из-за ленивой подгрузки контента (React.lazy) в момент обращения будет видеть ПУСТОТУ... Потому что React-у нечего отобразить...
Чтобы не было этой пустоты и пользователь понимал, что данные (а именно компоненты) грузятся - мы должны показать какую-то заглушку (fallback)... Для этого и нужен нам компонент React.Suspense
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#lazy #suspense #reactjs #практика #пример #уроки #курс

[@bugaga8144]

Только мне стало грустно после слов Димыча что к этому выпуску мы должны были уже минимум 3 раза прочитать всю документацию по react?

[@user-te9ci1tx4x]

это нереально!

[@serg-k]

привет, согласен с моим мнением ? Нет смысла читать, смысл есть сделать три проекта, используя все фичи доки , то есть сталкиваться с проблемой и решать ее, и как следствие понимать реакт лучше

[@bugaga8144]

@@serg-k 👋 Немогу ответить, так как не знаю, у всех по-разному, кто-то читает инструкцию к только что купленному телевизору, а кто-то нет. Кто из них будет более понимает телевизор?

[@user-wv8qm8zl1i]

@@bugaga8144 поймёт лучше телевизор тот кто уже несколько раз настраивал новые телики

[@aleksandrstarkov8427]

Самураи, в новой версии react router V6 надо так оборачивать:

[@zipri9576]

кайф, спасибо

[@v.volkau]

Спасибо

[@user-bo3qp7rk9u]

Не работает (он не видит suspense)

[@weather5234]

@@user-bo3qp7rk9u импортнуть его надо из react

[@pussydussy3693]

@@weather5234 или просто добавить "React." типа такого выйдет

[@n0escape]

Крч как и многие кто смотрит курс, был немного в депрессии от того, что Димыч ожидал от нас прочитанной документации от корки до корки. Что касается темы урока. Тут мы рассмотрели ситуацию, когда мы можем отсрочить загрузку страницы и ее дочерних файлов. Это нужно для того, чтобы уменьшить нагрузку при первой загрузке страницы. Прницип такой, что мы говоорим, мол, давай подгружать страницу (компоненту) только в момент ее вызова. Реализация. В компоненте, где вызывается другая компонента, изменяем строчку импорта компоненты, на следующий синтаксис: const DialogsContainer = React.lazy( () => import ('./components/Dialogs/DialogsContainer') ) Однако это еще не все. Чтобы выполнялась подгрузка страницы, нужно нужно в это время показывать загрузчик (любой div или компоненту). Чтобы отобразить загрузчик, нужно передать его в fallback в параметр компоненты React.Suspense, которой нужно обернуть импортированную компоненту. Данную логику можно вынести во внешний HOC, который будет принимать в себя компоеннту и оборачивать в React.Suspense. import React from "react" import Preloader from "../components/common/Preloader/Preloader" export const withSuspense = (Component) => (props) => { return ( ) } //...App const DialogsContainerWithSuspense = withSuspense(DialogsContainer) ...

[@andreypavlukov1192]

const DialogsContainerWithSuspense = withSuspense(DialogsContainer) Thanks man, you are genius!!!!

[@user-qj6ns8ot3l]

2022 год. Делал так:

[@oceanbeach5351]

Димыч, можно Suspense обернуть вокруг всех роутов, и тогда не нужен никакой хок. Таким образом, все бандлы будут примерно одного размера, и подгрузка страницы с прелоадером - это обычное явление для юзвера }/> ...otherRoutes

[@SAD1NG]

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

[@andreislashikov9618]

засчитан))

[@user-bl4dl9ke7b]

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

[@genapolyakov]

Можно обернуть все (...) в Suspense . Если нужно чтобы только один конкретный компонент грузился отложено, то только он один и импортируется через lazy. Проверял. Если сделать стандартный импорт с Suspense, то все они грузятся как и раньше, сразу. Именно lazy дает отложенную загрузку. Suspense только ожидает каким способом ему грузить: сразу или позже при запросе. Без lazy работает Suspense, а вот наоборот нет. Только lazy указывает, что будет происходить импорт/загрузка компоненты позже ("лениво"), но она обязательно должна быть обернута в Suspense Suspense (отложить) как? Lazy (лениво) импорт компоненты. Она же ленивая и просто так не грузится :)

[@MikhailKuklenkov]

Отличное решение)

[@followthewhiterabbit982]

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

[@followthewhiterabbit982]

​@RICARDOпримерно вот так:

[@user-bx7ly2th3b]

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

[@followthewhiterabbit982]

@@user-bx7ly2th3b в таком случае можно положить шапку и левые менюшки на том же уровне что и React.Suspence, а не внутрь него.

[@user-bx7ly2th3b]

@@followthewhiterabbit982 да

[@tilikwebdeveloper1848]

@@followthewhiterabbit982 у такого подхода есть подводные камни, например есть в UsersContainer есть useEffect, он сработает когда Suspense еще не успел убрать 'display: none', соотвественно я не смогу получать какие то нативные значения с DOM

[@egorpobylets6597]

Шикарный урок, от лучшего сенсея!!!! Я и не знал про React.lazy и suspens. Спасибо!!!

[@arayoflight]

"...а в конце сделали харакири" - оптимистичненько))). React.lazy и React.Suspense

[@shsh01212]

а можно ненадо

[@user-nk6ih7uh1h]

Отличный урок про lazy и Suspense получился! Дима, как всегда, просто красавчик! Кстати, если заглянуть в документацию, то вот, что там написано "Лучший способ внедрить разделение кода в приложение - использовать синтаксис динамического импорта: import().". Думаю, теперь lazy чуть в меньшем приоритете. В любом случае, Дима создал лучший курс по React JS и JavaScript. Спасибо за проделанную работу, самурай

[@sheshko_pavel]

2022, у кого ошибка падает ERROR in src\App.jsx Line 12:1: Import in body of module; reorder to top import/first .... Все компоненты с lazy загрузкой должны быть ПОСЛЕ ВСЕХ импортов: ... import {getAuthUserData} from "./redux/authReducer"; import Preloader from "./components/Common/Preloader/Preloader"; const DialogsContainer = React.lazy(() => import('./components/Dialogs/DialogsContainer.jsx')); .... А в Suspense можно обернуть все роуты и не делать HOC: ....

[@mikhail_shokun]

Так и сделал, спасибо, а главное все понятно и красиво ))) но потом посмотрел, и понял, что Димыч доносил мысль таковую: использовать ленивую подгрузку тех компонент, который нужно так загрузить, а таким методом, оборачивая все компоненты Suspense, мы всё сразу лениво подгружаем, тоесть смысл теряется

[@user-yl3fy9zk6z]

@@mikhail_shokun ты обернул то все, но React.Lazy делаешь только для тех, которых надо, и подгружаются только они, а не все

[@maxim.saharov]

​@@user-yl3fy9zk6z все правильно @Павел Шешко сделал! Даже в офиц документации так написано! я тоже только для одного импорта сделал React.Lazy, это что бы просто сравнивать как оно по разному работает.

[@maxim.saharov]

Спасибо большое, все ок работает!

[@pashabezk]

2022. Огонь! Ждал темы про ленивую загрузку ещё на первых уроках! Спасибо большое! P.s. для быстрого редактирования нескольких строк можно устанавливать курсор на нескольких строках. Для этого в вебшторме надо зажать shift+alt и провести по нужным строкам. В некоторых ситуациях очень спасает. Вот как сейчас, когда несколько строк импорта надо отредактировать. (В других IDE обычно такая фича работает просто по нажатию на alt без shift) P.p.s. для этого метода редактирования полезно также знать сочетания клавиш для быстрого прыжка через слово: ctrl+стрелочки, а также клавиши end (переместить курсор в конец строки) и home (переместить курсор в начало строки)

[@user-fs4sl5my1o]

Спасибо за урок !!! Отличный получился видос про React.lazy и React.Suspense )

[@mrmicolka]

Саспенсом можно сразу несколько компонент оборачивать и все прекрасно работает. }/> }/>

[@user-san-chous]

Ну да, как написано в документации "Компонент Suspense можно разместить в любом месте над ленивым компонентом. "

[@user-rd4ck6ei2f]

Вот тот Димыч которого мы знаем и любим...зашло на ура React.lazy и React.Suspense.....и hoc повторил...сухая документация пишет как сделать но тут ты понимаешь зачем и почему..

[@MrDelmast]

Когда-то был на js с нуля, теперь здесь :) Бомбим дальше!

[@marsonleonardovich4036]

Спасибо, было очень интересно! Полезная штука React.lazy и React.Suspense.

[@user-tr8hr4xm1l]

Спасибо, полезная инфа React.lazy и React.Suspense

[@mariia6820]

Крутое объяснение React.lazy и React.Suspense , как всегда на высоте!)

[@user-bx7ly2th3b]

Вот сколько раз доку перечитал - ничего не понял, в голове ничего не осталось. Посмотрел это видео - все встало на свои места, все понятно, все запомнил. Спасибо, Димыч!!))

[@user-pv5is5pz4j]

Спасибо за урок! React.lazy и React.Suspense

[@user-bd4lw9hx3s]

Очень хорошие уроки по React - Redux! Дмитрий отличный преподаватель! Очень понятно объяснил Lazy и Suspense в React!

[@ivanmiarkulau8320]

полезно знать для оптимизации первой загрузки приложения, спасибо за урок о React.lazy и React.Suspense!)

[@bitcoin-]

Спасибо Димон!Всё круто и понятно!Я сам сделал hoc))))

[@wild_wizards]

Лайк! Отличный урок и метод оптимизации загрузки. Едем дальше.

[@user-tp4fn2dl9w]

Это бесспорно крутой урок! Спасибо! 🙌

[@viktorshatalov1920]

Класс!!!как всегда - отличная мотивация!!!

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@shamilsalakhutdinov5519]

Читал про React.lazy и React.suspence в документации, понял, но очень поверхностно. После объяснения Димыча, все очень красиво заструктурировалось в голове. Спасибо за уроки React js redux 🙂😛

[@user-fi2gz4vr2l]

Благодарю! Очень полезный урок)

[@is_eliseeva]

спасибо за урок! React.lazy и React.Suspense

[@sergdiamond2793]

Для TS типизация: const UsersContainer = lazy(() => import("./components/Users/UsersContainer") .then((UsersContainer) => UsersContainer as { default: ComponentType }));

[@vladimirww5152]

Круто, ещё больше полезных знаний!)

[@hpcforum]

Димыч, еще можно было бы в видео сказать про такую ошибку, вылазит когда между импортами помещаем переменную: Line 10:1: Import in body of module; reorder to top import/first Line 11:1: Import in body of module; reorder to top import/first Line 12:1: Import in body of module; reorder to top import/first Line 14:1: Import in body of module; reorder to top import/first

[@user-sx2fw7lh1w]

Спасибо, Димыч. Всё очень доступно объяснил :)

[@user-di9dd7bb4l]

Спасибо за отличный урок!!! React.lazy и React.Suspense. React JS

[@ervinabliamitov2149]

Спасибо за урок, Зашло на ура!

[@marina-ej4qd9kc1wh]

Интересное видео получилось про suspense и lazy. Спасибо!

[@aleksandrstarkov8427]

In the newer version of router dom, the application of lazy loading, more precise application of the Suspense method has become much simpler. There is no need to apply the render method for each and every lazily loaded component. The total Routes process will be wrapped up by the Suspense method. But that does not mean it will suspend all components forcefully. It will be only applicable for those components which are lazily loaded using React.lazy() method.

[@mykhailostepanishchev6472]

Интересный урок ,спасибо ! React.lazy и React.Suspense

[@sergsergey4251]

React.lazy и React.Suspense. Крутотень! Бомбим дальше©

[@bystryisokol1546]

Классный урок про react.lazy и react.suspense

[@MikhailKuklenkov]

Крутой видос, Дима! Королевский лайк)

[@ctumyji9737]

Спасибо за урок! Летим дальше! React.Lazy & React.Suspense React JS от Димыча!

[@evgeniypp]

Пишем в src/hoc/withSuspense.js вот это: import React, { Suspense } from "react"; import Preloader from "../common/Preloader/Preloader"; export default Component => ( {Component} ); А в App.js просто передаем вот так: withSuspense()} /> JSX сам является объектом, и его можно передавать спокойно как аргумент, пропсы так React (точнее Babel) сам прокинет. P.S. А на самом деле, никакой HOC тут не нужен. Просто оберните все Route в return App.js .... Никакого дублирования, никаких лишних HOC, файлов и импортов

[@vladislavivanov4124]

React.lazy и React.Suspense лучшее объяснение, не без воды конечно, но спасибо Димыч))

[@dlucky13]

всем кто делает в 2020. Версия 16.13.1 React.lazy не работает. Нужно подключить а LoadableComponent. Об этом написано и в документации

[@indigosay8272]

а я то думаю че за ерунда спасибо)

[@indigosay8272]

скиньте, пожалуйста, как Вы код сделали с этим LoadableComponent. Делал всё по докам, но ничего не отрисовывается

[@dlucky13]

@@indigosay8272 я давно делал точно не помню. Могу дать ссылку на свой github я думаю ты даже быстрее разберешься: github.com/Dlucky13/social

[@indigosay8272]

@@dlucky13 от души благодарю

[@naiz4005]

Спасибо, полезно узнать про React.lazy и React.suspense для оптимизации загрузки

[@slavapush]

Переосмыслил хоки впринципе, голова кипит как в первый раз. Спасибо

[@tatianakruglaya6760]

Спасибо, Димыч за раскрытие темы React.lazy и React.Suspense.

[@vladim1]

Спасибо.React.lazy и React.Suspense.

[@user-dc1cr5ny3q]

React.lazy и React.Suspense, на одном дыхании, летим дальше!))))

[@user-bu3hz5be5w]

Шок-контент 18+ 31:51 React.lazy и React.Suspense Интересная штука, да и лишний раз увидел небольшой пример, где и как можно использовать HOC. Недавно из твоего урока узнал про Reac.memo и подробнее про чистые компоненты, так теперь всюду ими вымазываюсь, где вижу лишнюю перерисовку, думаю, с Suspense будет похожая история

[@user-ez7lk9kx6j]

React.lazy и React.Suspense лучшее объяснение! Зашло на Ура!

[@amaxe12345]

Спасибо тебе Димыч огромное за твой труд! Конечно же лайк за очередной полезный урок React.lazy и React.Suspense, зачем? - ReactJS #lazy #suspense #reactjs Друзья, обязательно отблагодарите Димыча - просто донатом или подпиской на API!

[@ITKAMASUTRA]

Спасибо-спасибо!

[@Titanidze17]

Спасибо за урок! А прелоадер подгружается каждый раз потому что нет настроек кеша. Это всякие .htaccess настраивать надо или еще чего-нибудь по бекэнду

[@eugene-dmitrievich]

Спасибо большое за урок! React, Redux, React.lazy React.Suspense

[@johnconnor9787]

Классно, понятно. Только сегодня нашел канал. Подписался

[@user-wf8bu6mt2i]

2020 от що пише про Suspense на офф сайті: Caution: This page describes experimental features that are not yet available in a stable release. Don’t rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. This documentation is aimed at early adopters and people who are curious. If you’re new to React, don’t worry about these features - you don’t need to learn them right now. For example, if you’re looking for a data fetching tutorial that works today, read this article instead.

[@user-ml5vp6rp9n]

Спасибо за урок!

[@andreiribac6284]

23.08.2021 ! Сегодня все было понятно1 Сама лучшая комбинация это - объяснение от Димыча + Чтение РеактДокументации!

[@sonnytonight414]

Ty tut samiy krutoy krasavchik!)

[@user-bx7ly2th3b]

Как я реализовывал эту тему в нативном JS когда у меня был большей сайт в разработке: 1. подгружаю только то, что нужно для текущей страницы и сразу ее отображаю 2. как только страница подгружена - загружаю пользователю в фоновом режиме в кеш все то, что связано с теми страницами, куда он может отсюда пойти 3. при этом я за пользователя хранил его статистику посещения страниц приложения (и делал фоновую догрузку в пункте 2 в соответствии с "популярностью" страниц ... ну типа просто по количеству заходов сортировал в порядке убывания) Наверное хрень, конечно же, ну я как-то так придумал и так делал... я само слово "бест-практис"-то узнал может месяц назад))

[@antonzhade5482]

React.lazy и React.Suspense, урок супер, использовать в проекте обязательно!

[@AnotherNiceNickName]

Круто. В перспективе очень полезная функция React.lazy. Зачем грузить всё и сразу, если можно подгружать по мере надобности? Логично же! Димыч, твой курс самый бомбезный! Я с тобой на долго!:)

[@user-yx7in9nl1d]

Было круто, ставим лайки!!!

[@dimitriitkach7697]

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

[@GrourDenis]

Классный урок про React lazy и React Suspense

[@ourpeoples1356]

устроился на работу - спустя 2 месяца после просмотра 100 выпусков, зп 500$, в стартап

[@localhost666]

Как успехи за год?

[@farbovaniylis315]

Как сейчас дела?

[@Snegurjan]

Крутой выпуск!

[@fargutvest]

Code Splitting React.Suspense React.lazy огромное количество файлов упаковываются вебпаком (webpack) в небольшое количество файлов, которые попадают на клиент в браузер: bundle.js chunk.js backend.js много мелких файлов загружать дольше чем несколько больших lazy loading: сразу загружаем только самое необходимое, стартовая загрузка страницы теперь быстрее - не загружается гигантский бандл (bundle) а по мере необходимости когда юзер будет кликать на другие страницы - подгружаем из через ленивую загрузку вместо обычного import ComponetName from './path_to_component' используем конструкцию const ComponentName = React.lazy(() => import('./path_to_component')); а в jsx разметке компоненту которая импортирована ленивым образом нужно обернуть в Suspense { return })/> (можно написать свой HOC делающий такое оборачивание) lingvo leo расширение для chrome Круто Спасибо! React Redux

[@user-cy4cz7zx4m]

Спасибо за урок

[@user-in5qb3ml4l]

Летим !

[@evgeniypp]

Lazy loading отлично отражает один из законов диалектики: отрицание отрицания. Хотели избавиться от перегрузки страниц во время перехода между ними - придумали SPA и начали грузить всё бандлами в начале. Теперь возникла проблема долгой загрузки на старте. Как решили? Правильно - вернулись к подгрузке "по необходимости", т.е., можно сказать, к тому, с чего и начинали) Правда на более высоком уровне. "За что боролись - на то и напоролись", как говорить)

[@ITKAMASUTRA]

Всё циклично))

[@Mixa_007]

Спасибо, Димыч, за урок по React.lazy и React.Suspense, С Новым 2021 годом! Надеюсь все эти знания до сих пор будут актуальными))

[@curillaenator]

Очень интересно! React Lazy Suspense

[@user-tc6kb4bl4n]

Спасибо Димыч! React.lazy и React.Suspense круть круть круть!

[@user-qv9nm2su7d]

Интересная тема, спасибо!

[@arthacker4382]

А что скажешь про динамически import(), спасибо за уроки .

[@user-yo4ix9gu7k]

React.lazy и React.Suspense!!! ReactJS

[@buksirchik1663]

Отличная тема React.lazy. Понял, что реально надо читать документацию несколько раз

[@ITKAMASUTRA]

да, я постоянно по много раз возвращаюсь, потому что во многом тугодум) и это норм)

[@user-bx7ly2th3b]

@@ITKAMASUTRA проблема не в тебе, и не в каждом другом человеке, кто не догонят доку... проблема в самой доке, которая написана на отъе*ись. Формально в доке все верно изложено, н окому нахрен нужно это "формально", когда куда важнее ,чтобы это было просто понятно.

[@vadikpanchuk4978]

React.lazy и React.Suspense, зачем? #94 - ReactJS - все круто, летим дальше, почитываем документацию! Димыч тебе лайк! Кратко, наглядно и главное понятно.

[@sergeyistominov5880]

Отличный урок !

[@MiqayelPetrosyan]

если я правильно понял сейчас пашется так }/>

[@semial]

Интересно, только у джунов не хватает внимательности, чтобы все по человечески сделать сразу или это вечная проблема программиста)))) У меня почему-то не работал suspence. Уже все перепробовал, как только я не размещал тег Suspence. В итоге, обернул полностью весь App и все заработало. А оказывается была проблема в том, что я случайно сделал React.lazy для HeaderContainer и поэтому все накрывалось. Он в ошибках мне говорил, что нужно вставить fallback, но у меня то он был, а оказывается не все обернул. Нам все равно не нужен этот HeaderContainer в ленивом отношении, поэтому сделал для него обычный импорт. Хух, бобмим дальше. Спасибо за урок, Димыч!!! react redux lazy suspence

[@oleksandrgochu7370]

для тих хто заморочився з "react-router-dom: ^6.*" і вирішив добити HOC-івску імплементацію, ділюся варінтом на прикладі DialogsContainer(решту роутів пишуться по аналогії) в App.js: ... render( ... const DialogApp = withSuspense(DialogsContainer); ... return( ... } /> ... і да, те шо можна, обгорунти всі роути Suspense - я побачив, але цікаво було добити таки HOC

[@theWorldIsMultivariate]

Super! Thanks a lot!

[@user-tz9rc7hn6y]

Продолжаем! Спасибо! P.S. Список ключевых слов: React, Redux, лучшие супер курсы, бесплатно, React.lazy, React.Suspense

[@user-tf6jz7hj9d]

React.Suspense React.Lazy Спасибо! Очень здорово объяснил и хок классный.

[@vanunisakanyan853]

спасибо тебе Димыч ахпер привет из Армении...

[@ivank.1193]

а если использовать styled components то это тоже будет считаться как lazy loading... мы же не через css даём стили, а в момент объявления. и только тому, что сосдаём... правильно? еще , насколько я понял из документации, можно обернуть все роуты сразу одним саспензом

[@ITKAMASUTRA]

Ответил на коммент в телеграм канале t.me/itkamasutra #qa9

[@ritaravinsky8262]

Спасибо! Очень нравится

[@semial]

Спасибо за урок! React.lazy React.Suspence ReactJS ReactRedux

[@taras8068]

React.lazy, React.suspense, большой лайк 👍

[@glebpilipenka3060]

Это просто пушка, я как работающий в контекстной рекламе и постоянно использующий google analytics оценил, летим!

[@vl8224]

Спасибо

[@spir1tfly]

Спасибо)

[@6ajkermexx591]

Отдельное спасибо за linguoLeo. Зашел со своего телефонного акка после установки в Хром. Прикольная тема! Почти так же прикольно как и React!

[@vitaliidrapaliuk5652]

спасибо)

[@pipkin931]

Если у кого ошибки характера import/first то все lazy import нужно указывать в самом конце ВСЕХ import'оф