00:00
05:20

React Intermediate: React Suspense and Lazy - [014]

In this post we will remove react-loadable and replace it with <Suspense /> and lazy

Lazy Component Loading

In pages/index.js we can lazily load our different 'components' or in our application we call 'segments'

import React, { lazy, Suspense } from 'react'import { routeNode } from 'react-router5'import Loading from 'components/loading'export default routeNode('')((props) => {  const { route } = props  const { params } = route  const segment = route.name.split('.')[0]  const _Segment = lazy(() => import(`./${segment}`))  return (    <Suspense fallback={<Loading />}>      <_Segment />    </Suspense>  )})

You may be wondering where the segment is coming from. It's actually coming from the url. So essentially in the pages directly the folders inside are considered 'segments' so posts and auth segments will be loaded when they first level of the url is /posts or /auth respectively. We then use the segment to load the corresponding component which is then fed into the <Suspense>

This will pretty much replace our react-loadable implementation entirely. That's pretty much it!