reactjs - What is the best way to prefetch a component in React?

Question

I have a dynamic form component that renders inputs based on an object prop. I have 6 lazy-loaded components. I would like to prefetch the non-rendered components as soon as the page is displayed so the next inputs appear immediately if requested (it is a multiple page form).

 <Suspense fallback={null}>
        {fields.map((field, i) => (
          <Field key={i}>
            {generateField(field, onChange)}
          </Field>
        ))}
 </Suspense>

question from:https://stackoverflow.com/questions/65848334/what-is-the-best-way-to-prefetch-a-component-in-react

Answer 1

have a look at react-eager-import a library that supports "async" import.

async import will load every time, right at the start. while lazy load will load only if and when needed.