Expose keys on useFetchers

.changeset/fetcher-key.md

@@ -3,3 +3,5 @@
 ---
 
 Add support for manual fetcher key specification via `useFetcher({ key: string })` so you can access the same fetcher instance from different components in your application without prop-drilling ([RFC](https://github.com/remix-run/remix/discussions/7698))
+
+- Fetcher keys are now also exposed on the fetchers returned from `useFetchers` so that they can be looked up by `key`

packages/react-router-dom/__tests__/data-browser-router-test.tsx

@@ -5213,6 +5213,37 @@ function testDomRouter(
             screen.getByText("1, idle/FETCH 2, idle/FETCH 2")
           );
         });
+
+        it("exposes fetcher keys via useFetchers", async () => {
+          let router = createTestRouter(
+            [
+              {
+                path: "/",
+                loader: () => "FETCH",
+                Component() {
+                  let fetcher1 = useFetcher();
+                  let fetcher2 = useFetcher({ key: "my-key" });
+                  let fetchers = useFetchers();
+                  React.useEffect(() => {
+                    if (fetcher1.state === "idle" && !fetcher1.data) {
+                      fetcher1.load("/");
+                    }
+                    if (fetcher2.state === "idle" && !fetcher2.data) {
+                      fetcher2.load("/");
+                    }
+                  }, [fetcher1, fetcher2]);
+                  return <pre>{fetchers.map((f) => f.key).join(",")}</pre>;
+                },
+              },
+            ],
+            { window: getWindow("/") }
+          );
+          let { container } = render(<RouterProvider router={router} />);
+          expect(container.innerHTML).not.toMatch(/__\d+__,my-key/);
+          await waitFor(() =>
+            expect(container.innerHTML).toMatch(/__\d+__,my-key/)
+          );
+        });
       });
 
       describe("<Form navigate={false}>", () => {

packages/react-router-dom/index.tsx

@@ -1380,7 +1380,7 @@ function validateClientSideSubmission() {
 }
 
 let fetcherId = 0;
-let getUniqueFetcherId = () => String(++fetcherId);
+let getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
 
 /**
  * Returns a function that may be used to programmatically submit a form (or
@@ -1580,9 +1580,12 @@ export function useFetcher<TData = any>({
  * Provides all fetchers currently on the page. Useful for layouts and parent
  * routes that need to provide pending/optimistic UI regarding the fetch.
  */
-export function useFetchers(): Fetcher[] {
+export function useFetchers(): (Fetcher & { key: string })[] {
   let state = useDataRouterState(DataRouterStateHook.UseFetchers);
-  return [...state.fetchers.values()];
+  return Array.from(state.fetchers.entries()).map(([key, fetcher]) => ({
+    ...fetcher,
+    key,
+  }));
 }
 
 const SCROLL_RESTORATION_STORAGE_KEY = "react-router-scroll-positions";