useFetcher within a Context?

[nikolailehbrink]

We're using useFetcher within a Context to fetch pricing data on our routes. The goal is to avoid unnecessary fetches when navigating between routes that result in the same pricing data. Here's a simplified version of what we're doing:

import { useFetcher } from '@remix-run/react';
import { createContext, useContext, useCallback, useEffect, useRef } from 'react';

const PriceDataContext = createContext(null);

export function PriceDataProvider({ children }) {
  const priceFetcher = useFetcher();
  const dataCache = useRef({});

  const loadPrices = useCallback((params) => {
    // If params are unchanged, avoid refetching
    const searchParams = new URLSearchParams(params);
    const cacheKey = searchParams.toString();
    
    if (!dataCache.current[cacheKey]) {
      priceFetcher.load(`/api/prices?${cacheKey}`);
      dataCache.current[cacheKey] = true;
    }
  }, [priceFetcher]);

  return (
    <PriceDataContext.Provider value={{ loadPrices, priceFetcher }}>
      {children}
    </PriceDataContext.Provider>
  );
}

export function usePriceData() {
  return useContext(PriceDataContext);
}

In this setup, we're caching the parameters used in useFetcher calls to avoid redundant network requests when the data is already fetched for a specific route.

Is this an optimal way to preserve data and prevent unnecessary fetches with useFetcher, or is there a better pattern or built-in approach within Remix to handle this scenario?

[sergiodxa]

If you add a key to the fetcher like useFetcher({ key: "prices" }) then every instance with the same key will share the data of the fetcher.

[yannickpschroeder]

@sergiodxa Does that mean there is no need to preserve a call useFetcher inside a context at all?

[nikolailehbrink]

Good question, @yannickpschroeder!

I followed your approach @sergiodxa and wrote the following hook. It works as expected: when navigating to a route and calling the fetcher, the data persists without needing to reload, similar to how the context works. However, I'm uncertain about the lifecycle of the fetcher with the key. Specifically, how does the mounting and unmounting behavior work? Does the fetcher remain active as long as the user navigates through the app, or is there a specific point at which it unmounts or clears its data?

I'm concerned that users can generate multiple fetchers by changing the searchParams (e.g., date, location) and that the old fetchers might never be cleared. Could this lead to performance issues or unintended data persistence? How does Remix handle cleanup in such cases?

import { useFetcher, useSearchParams } from "@remix-run/react";
import { useEffect } from "react";

export function useAvailability() {
  const [searchParams] = useSearchParams();

  // The "empty" is needed, because otherwise key is empty and the fetcher.data persists
  const key = searchParams.toString() || "empty";
  const { load, ...fetcher } = useFetcher({ key });

  const shouldReload =
    !fetcher.data && searchParams.has("date") && searchParams.has("location");

  useEffect(() => {
    if (shouldReload) {
      console.log("Loading with key:", key);
      load("/api/availability?" + key);
    }
  }, [load, shouldReload, key]);

  return fetcher;
}

[sergiodxa]

If no more useFetcher calls with that key are used they should be cleared eventually