Saber2pr's Blog


If a component needs to request data before displaying content, the waiting process uses the Loading component, which can be done with React.Suspense& React.lazy.


Types of parameters accepted by React.lazy:

type LazyAble = () => Promise<{ default: any }>

The common practice is to use the import function to import the component file, which must have a default export.



React.lazy(async () => {
  return {
    default: () => <View />

In that case, is it possible to make some asynchronous requests before async return?


Wait for await promise before async return and pass the result to children.

ing render children

export interface LazyCom<T> {
  await: Promise<T>
  fallback: React.ReactNode
  children: (response: T) => JSX.Element

Then there is:

export function LazyCom<T>({ children, await: wait, fallback }: LazyCom<T>) {
  const Com = React.lazy(async () => {
    const com = await wait
    return {
      default: () => children(com)

  return (
    <React.Suspense fallback={fallback}>
      <Com />

Complete code