Dynamically Import React Components with React.lazy and Suspense

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 🙂)

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 🙂)

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.

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.

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.

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

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: