React.lazy — еще один полезный сценарий 🚀

Одни из самых популярных кейсов использования React.lazy + Suspense — динамическая загрузка отдельных страниц или тяжелых библиотек:

// code splitting по роутам
const Dashboard = lazy(() => import('./Dashboard'));

<Route path="/dashboard" element={<Suspense fallback={<Loader />}><Dashboard /></Suspense>} />

// code splitting для тяжелых библиотек
const ImageEditor = lazy(() => import('./ImageEditor'));

<Suspense fallback={<Loader />}><ImageEditor /></Suspense>

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

👨‍💻 Для подобных сценариев можно собрать компонент-контейнер с Suspense+ErrorBoundary, который будет показывать процесс загрузки и отлавливать ошибки независимо от уровня вложенности remote-модулей. Итоговая структура выглядит так:

// контейнер для remote-модулей 
const ModulesContainer = ({ loadingView, errorView, children }) => (
  <Suspense loadingView={loadingView}>
    <ErrorBoundary errorView={errorView}>
      {children}
    </ErrorBoundary>
  </Suspense>
);

// используем модули на любом уровне с одним лоадером:
<ModulesContainer 
 loadingView={<CustomLoader />} 
 errorView={<CustomError />}
>
  <ComponentHeader>
    <ComponentBody>
      <RemoteModule2 value="a" />
    </ComponentBody>
  </ComponentHeader>
  <RemoteModule1 value="b" />
</ModulesContainer>

P.S.: Не забываем логировать ошибки в ErrorBoundary! 📊

#react #microfrontends #lazy #js #javascript #typescript #frontend #фронтенд #разработка #dev #webdev #react #nodejs