DEV Community

Cover image for Prefetch lazy-loaded component
Sung M. Kim
Sung M. Kim

Posted on

Prefetch lazy-loaded component

#react #devjournal #thoughts

Cory House has posted following tweet today.

Cory has pointed out a feature in CRA to enable prefetching lazy component, but I learned of a way to apply it on a project.

Scenario

Suppose that you are building a customer intake site.

When a user receives a call, the user can quickly load up the initial customer page

because the site is small because non-essential code is split (lazy loaded).

Validating user (to confirm that the user has the correct customer's page on) will be the idle time to prefetch the lazy component such as tabs to fill in the customer's information, and modal confirmation boxes, etc.

The typical workflow will be,

  1. User searches for the customer
  2. Customer page is loaded fast (initial site is small due to code split)
  3. User confirms with customer if the right page is loaded (providing idle time for prefetch)
  4. During the idle time, non-essential (not needed right away on load) such as modal or forms in tabs are loaded.
  5. User can gather data from customer, and enter it quickly.

Thoughts

So this would especially be effective for LOB (line of business) apps with lots of data to enter or look up.

Ones I can think of are,

  1. Intake screen - where a user confirms the right customer page, and during that time, other forms/modals or non-essential but needed components are loaded.
  2. Dashboard - where graphs outside the viewport is lazily but prefetched (user analyzing the top graph will give enough time for other graphs outside the viewport to be prefetched during that time)
  3. Any Master-detail pages - e.g.) A site with lots of image with modal for details such as
  4. Nav menu - Top level menu is loaded right away, and menu items shown on hover are loaded lazy but prefetched.

Image Credit: Created with the Imgflip Meme Generator

Top comments (7)

Collapse
 
maddhruv profile image
Dhruv Jain •

With a very small modification we can add support for prefetching to the wrapper lazy load function with retry.

// Lazy with Retry and Prefetching
export const lazyWithRetryAndPrefetching = (componentImport) => {
  const factory = async () => {
    try {
      return await componentImport();
    } catch (error) {
      console.error(error);
      return window.location.reload();
    }
  };

  const Component = lazy(factory);

  Component.prefetch = factory;

  return Component;
};
Enter fullscreen mode Exit fullscreen mode

Deterministically prefetching is as easy as

// App.jsx
const Material = lazyWithRetryAndPrefetching(() => import("./Material"));

useEffect(() => {
    Material.prefetch();
}, []);
Enter fullscreen mode Exit fullscreen mode

Checkout more details at

Collapse
 
fly profile image
joon • • Edited

Possibly too technical yet to apply to any of my current projects, but definitely something that I will try in the future. Thank you for the post :)

Collapse
 
dance2die profile image
Sung M. Kim •

Thank you, joon and glad to have found it useful.

This post also serves as a #devjournal to remind myself and get back to :)

Collapse
 
httpjunkie profile image
Eric Bishard •

I came here for the Koala! didn't even read the article! OK, I'll read the article. But let it be known I came for the Koala image...

Collapse
 
dance2die profile image
Sung M. Kim •

So long as the image peaked your interest, I am fine 😁

Collapse
 
lineldcosta profile image
lineldcosta •

Awesome tip!

Collapse
 
dance2die profile image
Sung M. Kim •

Thanks~

Read next

ajmal_hasan profile image

Handling Component-Specific Loading and Data State with Redux for API Calls in React Native

Ajmal Hasan -

tusharshahi profile image

The convenience of CSS's new @position-try

TusharShahi -

truongpx396 profile image

⚡🚀 ReactJS, TypeScript, Vite with Redux and TanStack (React Query) In Practice ⚛️

Truong Phung -

abeertech01 profile image

Dockerize PERN-TypeScript App Using Prisma ORM With Docker Compose

Abdul Ahad Abeer -