Dynamically Import React Components with React.lazy and Suspense

Share this video with your friends

Send Tweet

With React 16.6.0, React Suspense was officially released as a stable feature (with limited support for React.lazy). Let's refactor our lazily-loaded components that are using react-loadable to components that use the built-in React.lazy feature.

Rahil
Rahil
~ 6 years ago

HI Kent .. An awesome course indeed. one doubt: what if while a preload request is being made the user actually navigates to that resource. will there be two calls from the browser or how will that be handled. Also, is it preferred to use hooks over render props if the render props weren't used earlier. (in my code ๐Ÿ™‚)

Rahil
Rahil
~ 6 years ago

HI Kent .. An awesome course indeed. one doubt: what if while a preload request is being made the user actually navigates to that resource. will there be two calls from the browser or how will that be handled. Also, is it preferred to use hooks over render props if the render props weren't used earlier. (in my code ๐Ÿ™‚)

Kent C. Dodds
Kent C. Dodds(instructor)
~ 6 years ago

Hi Rahil,

Yes, there will be two requests, but depending on the implementation of the requesting code you may be able to cancel the first. Everything but React.lazy with suspense is extremely experimental so lots of things are still up in the air.

Horizon
Horizon
~ 6 years ago

I found the explanation of getting rid of error in LoadingFallback at 1:30 to be quite confusing. I had to go a look up how react-loadable works to understand that react-loadable passes an error to the loading component instead of throwing, which is what I guess React.lazy must do.

Jochem Nabuurs
Jochem Nabuurs
~ 6 years ago

Hi Kent,

I've got a project that involves 5 websites that are almost identical. They only have some styling differences, and some components aren't used on all websites but on just a few. I'm using create-react-app to create the basis of this project. I was thinking about the architecture for this project.

My initial setup was my main entry point being /src/index.tsx, where there was a switch statement inside the <App /> component that loaded a <WebsiteA /> or <WebsiteB /> component, depending on a env variable.

But as this resulted in a final build package that includes all code for all websites, this isn't a viable option.

Then i thought about creating a dynamic import that dynamically imports the app code based on the env var like this:

const site = process.env.REACT_APP_SITE
const App = React.lazy(() => import(`./src/sites/${site}/App`))
const 
ReactDOM.render(<Suspense
            fallback={
              <LoadingAppScreen />
            }
          ><App /></Suspense>, document.getElementById('root'))

This works in a way that webpack creates a build which only contains the code used. But I'm not sure if there are major drawbacks to this approach.

Kent C. Dodds
Kent C. Dodds(instructor)
~ 6 years ago

Jochem, that would be a great question for my AMA: https://kcd.im/ama

Jochem Nabuurs
Jochem Nabuurs
~ 6 years ago

Cool. Didn't know about it's existence. Will drop a line there.

Met vriendelijke groet,

Jochem NabuursJaffiro Turennesingel 144 | 6663 GV Lent | M 06 52 09 10 09 | www.jaffiro.nl

Member of Dutch Web Alliance - Leaders in web technology | www.dutchweballiance.nl

Op vr 15 feb. 2019 om 15:20 schreef Kent notifications@egghead.io: