revert fetcher changes to allow surfacing immidately

Author: jacob-ebey

packages/react-router/lib/components.tsx

@@ -423,10 +423,7 @@ export function RouterProvider({
     currentLocation: Location;
     nextLocation: Location;
   }>();
-  // let fetcherData = React.useRef<Map<string, any>>(new Map());
-  let [fetcherData, setFetcherData] = React.useState<Map<string, any>>(
-    new Map(),
-  );
+  let fetcherData = React.useRef<Map<string, any>>(new Map());
   let logErrorsAndSetState = React.useCallback(
     (newState: RouterState) => {
       setStateImpl((prevState) => {
@@ -452,24 +449,12 @@ export function RouterProvider({
       newState: RouterState,
       { deletedFetchers, flushSync, viewTransitionOpts },
     ) => {
-      setFetcherData((prev) => {
-        const newFetchers = new Map(prev);
-
-        newState.fetchers.forEach((fetcher, key) => {
-          if (fetcher.data !== undefined) {
-            newFetchers.set(key, fetcher.data);
-          }
-        });
-        deletedFetchers.forEach((key) => newFetchers.delete(key));
-
-        return newFetchers;
+      newState.fetchers.forEach((fetcher, key) => {
+        if (fetcher.data !== undefined) {
+          fetcherData.current.set(key, fetcher.data);
+        }
       });
-      // newState.fetchers.forEach((fetcher, key) => {
-      //   if (fetcher.data !== undefined) {
-      //     fetcherData.current.set(key, fetcher.data);
-      //   }
-      // });
-      // deletedFetchers.forEach((key) => fetcherData.current.delete(key));
+      deletedFetchers.forEach((key) => fetcherData.current.delete(key));
 
       warnOnce(
         flushSync === false || reactDomFlushSyncImpl != null,
@@ -757,7 +742,7 @@ export function RouterProvider({
     <>
       <DataRouterContext.Provider value={dataRouterContext}>
         <DataRouterStateContext.Provider value={state}>
-          <FetchersContext.Provider value={fetcherData}>
+          <FetchersContext.Provider value={fetcherData.current}>
             <ViewTransitionContext.Provider value={vtContext}>
               <Router
                 basename={basename}

packages/react-router/lib/rsc/browser.tsx

@@ -746,8 +746,7 @@ export function RSCHydratedRouter({
     }
   }, []);
 
-  let [{ fetchers, routes, state }, setState] = React.useState(() => ({
-    fetchers: new Map(router.state.fetchers),
+  let [{ routes, state }, setState] = React.useState(() => ({
     routes: cloneRoutes(router.routes),
     state: router.state,
   }));
@@ -757,7 +756,6 @@ export function RSCHydratedRouter({
       router.subscribe((newState) => {
         React.startTransition(() => {
           setState({
-            fetchers: new Map(newState.fetchers),
             routes: cloneRoutes(router.routes),
             state: newState,
           });
@@ -770,11 +768,10 @@ export function RSCHydratedRouter({
     () =>
       ({
         ...router,
-        fetchers,
         state,
         routes,
       }) as typeof router,
-    [router, fetchers, routes, state],
+    [router, routes, state],
   );
 
   React.useEffect(() => {

playground/framework/app/routes/product.tsx

@@ -1,9 +1,20 @@
+import { useFetcher } from "react-router";
 import type { Route } from "./+types/product";
 
 export function loader({ params }: Route.LoaderArgs) {
   return { name: `Super cool product #${params.id}` };
 }
 
 export default function Component({ loaderData }: Route.ComponentProps) {
-  return <h1>{loaderData.name}</h1>;
+  const fetcher = useFetcher();
+
+  return (
+    <>
+      <h1>{loaderData.name}</h1>
+      <button onClick={() => fetcher.load("/products/fetcher")}>
+        Load via Fetcher
+      </button>
+      {fetcher.data && <pre>{JSON.stringify(fetcher.data, null, 2)}</pre>}
+    </>
+  );
 }