Package Exports

react-prefetching
react-prefetching/dist/react-prefetching.cjs.js
react-prefetching/dist/react-prefetching.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-prefetching) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-prefetching

React Prefetching

Use this package by 3 steps to prefetch hovered links and fix fetch waterfalls to make your apps lightning fast.

You can read this article to know more.

Problem

Assume you have an app using react-router-dom and react-query.

import { useQuery } from "react-query";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Link to="/a">A</Link>
        <Route path="a" element={<A />} />
      </Routes>
    </BrowserRouter>
  );
}

function A() {
  const { isLoading, data } = useQuery("A", () => fetchA());
  if (isLoading) return <p>Loading</p>;
  return <div> {data} <B/> </div>;
}

function B() {
  const { isLoading, data } = useQuery("B", () => fetchB());
  if (isLoading) return <p>Loading</p>;
  return <div> {data} <C/> </div>;
}

function C() {
  const { isLoading, data } = useQuery("C", () => fetchC());
  if (isLoading) return <p>Loading</p>;
  return <div>{data}</div>;
}

Then your app has fetch waterfalls issue and doesn't have the prefetching feature.

Solution

npm i react-prefetching

Replace BrowserRouter from react-router-dom with PrefetchRouter from react-prefetching
Replace Link and NavLink from react-router-dom with react-prefetching
In components, after uesQuery, if useIsPrefetch() is true, return the child components.

import { useQuery } from "react-query";
import { Route, Routes } from "react-router-dom";
import { Link, PrefetchRouter, useIsPrefetch } from "./Prefetch";

export default function App() {
  return (
    <PrefetchRouter> // <- 1. replace BrowserRouter
      <Routes>
        <Link to="/a">A</Link> // <- 2. use Link from prefetch
        <Route path="a" element={<A />} />
      </Routes>
    </PrefetchRouter>
  );
}

function A() {
  const { isLoading, data } = useQuery("A", () => fetchA());
  if (useIsPrefetch()) return <B />; // <- 3. return Child if isPrefetch
  
  if (isLoading) return <p>Loading</p>;
  return <div> {data} <B /> </div>;
}

function B() {
  const { isLoading, data } = useQuery("B", () => fetchB());
  if (useIsPrefetch()) return <C />; // <- 3. return Child if isPrefetch

  if (isLoading) return <p>Loading</p>;
  return <div> {data} <C /> </div>;
}

function C() {
  const { isLoading, data } = useQuery("C", () => fetchC());
  if (isLoading) return <p>Loading</p>;
  return <div>{data}</div>;
}

Then fetch waterfalls issue is totally solved and the queries will be prefetched when users hover links. That makes your frontend app look blazingly fast. No more loading spinners!

Demo

Check this codesandbox demo to play with it.