If I am using react18, do I still need loadable-components

[chris-nie]

loadable-components

Loadable Components is meant to make React code splitting easy.

However, react 18 has Suspense working on the server side now. Then what are the cases where we still need to use loadable-components?

[theKashey]

You want them to hold hydration before rendering. This is not a "requirement" for SSR right now, but Suspense will trigger loading state dropping any context inside in case of any external update - facebook/react#22692

For situations like this you might still need orchestration provided by loadable or similar solution.

[cchaonie]

@theKashey, what do you mean by "hold hydration before rendering"?

[theKashey]

There is no need to use loadable for client side dynamic imports. Absolutely no need since you have React.lazy working better and out of the box.
For SSR/hydration you still need something and from some point of view all the functionality loadable components provide - is just a loadableReady delaying hydration before all required chunks are loaded

loadableReady(() => {
  const root = document.getElementById('main')
  hydrate(<App />, root) // <-- delayed
})

[cchaonie]

Thanks for the detailed explanation, @theKashey
So loadable components now serve as a tool to collect preloaded (and prefetched) chunks on the server side and make sure those chunks are loaded accordingly on the client side. Is this understanding correct?

[theKashey]

You can think so. This is a piece of functionality not covered by React.Lazy and the one you still need around.

[chris-nie]

@theKashey Thank you for your answer, now I know what I need to do.