3

I was looking into code splitting and lazy loading in the react docs where it mentions that

The lazy component should then be rendered inside a Suspensecomponent, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

I am not super clear on the meaning of `load` here - does it mean loading into the memory or fetching over the network and load into the memory?

If it defers the fetching, then how do we know which endpoint to hit to fetch the split chunk from when the component is needed?

I came across this demo on codesandbox where it has every tab lazily loaded

const Tab1 = lazy(() => import("./components/tabs/Tab1"));

const Tab2 = lazy(() => import("./components/tabs/Tab2"));

const Tab3 = lazy(() => import("./components/tabs/Tab3"));

const Tab4 = lazy(() => import("./components/tabs/Tab4"));

But by checking the network tab, I don't see new requests coming out when I switched the tabs. Am I missing the point of code splitting and lazy loading here?

Joji
  • 4,703
  • 7
  • 41
  • 86

0 Answers0