Faster Links in React

Have you ever clicked a link in your React app and felt the tiny delay before the new page shows up? If you’ve used Next.js, you probably noticed links there feel instant.

That’s because Next.js prefetches pages. It loads them in the background when the link is visible on screen or when you hover over it.

Note: in Next.js, prefetching is not enabled by default — you need to set it using the prefetch prop:

<Link href="/about" prefetch>About</Link>

Let’s Copy That in React

We don’t have <Link prefetch> in plain React, but we can build it in a few lines.

Here’s a tiny <PrefetchLink> component:

import React from "react";
 
const loadedPages = new Set();
 
export function PrefetchLink({ to, loader, children }) {
  let observer;
 
  const setRef = (node) => {
    if (!node) return;
 
    observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        if (!loadedPages.has(to)) {
          loader();
          loadedPages.add(to);
        }
        observer.disconnect();
      }
    });
 
    observer.observe(node);
  };
 
  const prefetch = () => {
    if (!loadedPages.has(to)) {
      loader();
      loadedPages.add(to);
    }
  };
 
  const handleClick = (e) => {
    e.preventDefault();
    history.pushState(null, "", to);
    window.dispatchEvent(new PopStateEvent("popstate"));
  };
 
  return (
    <a
      href={to}
      ref={setRef}
      onMouseEnter={prefetch}   // desktop
      onTouchStart={prefetch}  // mobile
      onClick={handleClick}
    >
      {children}
    </a>
  );
}

How It Feels

Link shows up on screen → page starts preloading.
Hover on desktop or touch on mobile → page preloads instantly.
When you click, navigation feels almost instant.

Example

function App() {
  const loadAboutPage = () => import("./AboutPage");
 
  return (
    <div>
      <PrefetchLink to="/about" loader={loadAboutPage}>
        About Us
      </PrefetchLink>
    </div>
  );
}

That’s it. Now your React links can feel as fast as Next.js links.