react-router 8.3.1 → 8.4.0

package/dist/production/lib/rsc/server.ssr.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,10 +9,10 @@
  * @license MIT
  */
 import { isRouteErrorResponse } from "../router/utils.js";
-import { hasInvalidProtocol } from "../router/router.js";
+import { createDataRouteMatcher, hasInvalidProtocol } from "../router/router.js";
 import { RSCRouterContext } from "../context.js";
 import { decodeRedirectErrorDigest, decodeRouteErrorResponseDigest } from "../errors.js";
-import { escapeHtml } from "../dom/ssr/markup.js";
+import { escapeAttribute } from "../dom/ssr/markup.js";
 import { shouldHydrateRouteLoader } from "../dom/ssr/routes.js";
 import { FrameworkContext } from "../dom/ssr/components.js";
 import { StaticRouterProvider, createStaticRouter } from "../dom/server.js";
@@ -179,7 +179,7 @@ async function routeRSCServerRequest({ request, serverResponse, createFromReadab
 		const redirectTransform = new TransformStream({ flush(controller) {
 			if (renderRedirect) {
 				if (hasInvalidProtocol(renderRedirect.location)) return;
-				controller.enqueue(new TextEncoder().encode(`<meta http-equiv="refresh" content="0;url=${escapeHtml(renderRedirect.location)}"/>`));
+				controller.enqueue(new TextEncoder().encode(`<meta http-equiv="refresh" content="0;url=${escapeAttribute(renderRedirect.location)}"/>`));
 			}
 		} });
 		if (!hydrate) return new Response(html.pipeThrough(redirectTransform), {
@@ -258,7 +258,7 @@ async function routeRSCServerRequest({ request, serverResponse, createFromReadab
 			const retryRedirectTransform = new TransformStream({ flush(controller) {
 				if (retryRedirect) {
 					if (hasInvalidProtocol(retryRedirect.location)) return;
-					controller.enqueue(new TextEncoder().encode(`<meta http-equiv="refresh" content="0;url=${escapeHtml(retryRedirect.location)}"/>`));
+					controller.enqueue(new TextEncoder().encode(`<meta http-equiv="refresh" content="0;url=${escapeAttribute(retryRedirect.location)}"/>`));
 				}
 			} });
 			if (!hydrate) return new Response(html.pipeThrough(retryRedirectTransform), {
@@ -333,6 +333,24 @@ function RSCStaticRouter({ getPayload, nonce }) {
 	if (payload.type !== "render") return null;
 	let patchedLoaderData = { ...payload.loaderData };
 	for (const match of payload.matches) if (shouldHydrateRouteLoader(match.id, match.clientLoader, match.hasLoader, false) && (match.hydrateFallbackElement || !match.hasLoader)) delete patchedLoaderData[match.id];
+	const routes = payload.matches.reduceRight((previous, match) => {
+		const route = {
+			id: match.id,
+			action: match.hasAction || !!match.clientAction,
+			element: match.element,
+			errorElement: match.errorElement,
+			handle: match.handle,
+			hydrateFallbackElement: match.hydrateFallbackElement,
+			index: match.index,
+			loader: match.hasLoader || !!match.clientLoader,
+			path: match.path,
+			shouldRevalidate: match.shouldRevalidate
+		};
+		if (previous.length > 0) route.children = previous;
+		return [route];
+	}, []);
+	const dataRouteMatcher = createDataRouteMatcher({}, payload.basename || "/");
+	dataRouteMatcher.update(routes);
 	const context = {
 		get _deepestRenderedBoundaryId() {
 			return decoded._deepestRenderedBoundaryId ?? null;
@@ -348,6 +366,7 @@ function RSCStaticRouter({ getPayload, nonce }) {
 		loaderHeaders: {},
 		location: payload.location,
 		statusCode: 200,
+		_match: (locationArg) => dataRouteMatcher.match(locationArg),
 		matches: payload.matches.map((match) => ({
 			params: match.params,
 			pathname: match.pathname,
@@ -363,22 +382,7 @@ function RSCStaticRouter({ getPayload, nonce }) {
 			}
 		}))
 	};
-	const router = createStaticRouter(payload.matches.reduceRight((previous, match) => {
-		const route = {
-			id: match.id,
-			action: match.hasAction || !!match.clientAction,
-			element: match.element,
-			errorElement: match.errorElement,
-			handle: match.handle,
-			hydrateFallbackElement: match.hydrateFallbackElement,
-			index: match.index,
-			loader: match.hasLoader || !!match.clientLoader,
-			path: match.path,
-			shouldRevalidate: match.shouldRevalidate
-		};
-		if (previous.length > 0) route.children = previous;
-		return [route];
-	}, []), context);
+	const router = createStaticRouter(routes, context);
 	const frameworkContext = {
 		future: {},
 		isSpaMode: false,

package/dist/production/lib/server-runtime/cookies.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/crypto.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/data.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/dev.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/entry.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/errors.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/headers.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/invariant.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/mode.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/routeMatching.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,11 +8,10 @@
  *
  * @license MIT
  */
-import { matchRoutesImpl } from "../router/utils.js";
 import invariant from "./invariant.js";
 //#region lib/server-runtime/routeMatching.ts
-function matchServerRoutes(manifest, dataRoutes, branches, pathname, basename) {
-	let matches = matchRoutesImpl(dataRoutes, pathname, basename ?? "/", false, branches);
+function matchServerRoutes(manifest, staticHandler, pathname) {
+	let matches = staticHandler.match(pathname);
 	if (!matches) return null;
 	return matches.map((match) => {
 		let route = manifest[match.route.id];

package/dist/production/lib/server-runtime/routes.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/server.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -90,12 +90,12 @@ function derive(build, mode) {
 		}
 		let manifestUrl = getManifestPath(build.routeDiscovery.manifestPath, build.basename);
 		if (build.routeDiscovery.mode === "lazy" && requestUrl.pathname === manifestUrl) try {
-			return await handleManifestRequest(build, staticHandler.dataRoutes, staticHandler._internalRouteBranches, requestUrl);
+			return await handleManifestRequest(build, staticHandler, requestUrl);
 		} catch (e) {
 			handleError(e);
 			return new Response("Unknown Server Error", { status: 500 });
 		}
-		let matches = matchServerRoutes(build.routes, staticHandler.dataRoutes, staticHandler._internalRouteBranches, normalizedPathname, build.basename);
+		let matches = matchServerRoutes(build.routes, staticHandler, normalizedPathname);
 		if (matches && matches.length > 0) Object.assign(params, matches[0].params);
 		if (requestHandlerInstrumentations?.length) loadContext.set(instrumentationResultMetaContext, {
 			url: createDataFunctionUrl(request, normalizedPath),
@@ -173,7 +173,7 @@ const createRequestHandler = (build, mode) => {
 		return _requestHandler(request, initialContext);
 	};
 };
-async function handleManifestRequest(build, dataRoutes, branches, url) {
+async function handleManifestRequest(build, staticHandler, url) {
 	if (url.toString().length > 7680) return new Response(null, {
 		statusText: "Bad Request",
 		status: 400
@@ -188,7 +188,7 @@ async function handleManifestRequest(build, dataRoutes, branches, url) {
 		let paths = new Set(pathParam.split(",").filter(Boolean));
 		for (let path of paths) {
 			if (!path.startsWith("/")) path = `/${path}`;
-			let matches = matchServerRoutes(build.routes, dataRoutes, branches, path, build.basename);
+			let matches = matchServerRoutes(build.routes, staticHandler, path);
 			if (matches) for (let match of matches) {
 				let routeId = match.route.id;
 				let route = build.assets.routes[routeId];
@@ -256,7 +256,7 @@ async function handleDocumentRequest(serverMode, build, staticHandler, request,
 		};
 		let entryContext = {
 			manifest: build.assets,
-			branches: staticHandler._internalRouteBranches,
+			branches: [],
 			routeModules: createEntryRouteModules(build.routes),
 			staticHandlerContext: context,
 			criticalCss,
@@ -291,6 +291,7 @@ async function handleDocumentRequest(serverMode, build, staticHandler, request,
 			};
 			entryContext = {
 				...entryContext,
+				branches: [],
 				staticHandlerContext: context,
 				serverHandoffString: createServerHandoffString(baseServerHandoff),
 				serverHandoffStream: encodeViaTurboStream(state, request.signal, build.entry.module.streamTimeout, serverMode),

package/dist/production/lib/server-runtime/serverHandoff.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/sessions/cookieStorage.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/sessions/memoryStorage.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/sessions.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/single-fetch.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/urls.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/warnings.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/types/internal.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/route-pattern.d.ts

@@ -0,0 +1,3 @@
+
+import { unstable_preloadRoutePattern } from "./lib/router/matcher-route-pattern.preload.js";
+export { unstable_preloadRoutePattern };

package/dist/production/route-pattern.js

@@ -0,0 +1,12 @@
+/**
+ * react-router v8.4.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { unstable_preloadRoutePattern } from "./lib/router/matcher-route-pattern.preload.js";
+export { unstable_preloadRoutePattern };

package/dist/production/vendor/turbo-stream-v2/flatten.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/vendor/turbo-stream-v2/turbo-stream.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/vendor/turbo-stream-v2/unflatten.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/vendor/turbo-stream-v2/utils.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/docs/how-to/fetchers.md

@@ -85,7 +85,7 @@ export default function Component() {
 
 ### 3. Submit the form
 
-If you submit the form now, the fetcher will call the action and revalidate the route data automatically.
+If you submit the form now, the fetcher will call the action and revalidate the route data automatically. See [Revalidation Optimization](./optimize-revalidation) to skip that reload for a route or a single submission.
 
 ### 4. Render pending state
 
@@ -305,3 +305,8 @@ Fetchers can be submitted programmatically with `fetcher.submit`:
 ```
 
 Note the input event's form is passed as the first argument to `fetcher.submit`. The fetcher will use that form to submit the request, reading its attributes and serializing the data from its elements.
+
+`fetcher.submit` accepts the same [`defaultShouldRevalidate`][fetcher-submit-options] option as [`<Form>`][form]. Pass `false` to skip loader revalidation for that submission. See [Revalidation Optimization](./optimize-revalidation) for how that interacts with route-level `shouldRevalidate`.
+
+[fetcher-submit-options]: https://api.reactrouter.com/v8/interfaces/react-router.FetcherSubmitOptions.html#defaultshouldrevalidate
+[form]: ../api/components/Form#defaultshouldrevalidate

package/docs/how-to/middleware.md

@@ -358,7 +358,9 @@ In theory, we could have leveraged [`AsyncLocalStorage`][asynclocalstorage] dire
 
 That said, this API still works great with React Router middleware and can be used in place of, or alongside of the `context` API:
 
-<docs-info>[`AsyncLocalStorage`][asynclocalstorage] is _especially_ powerful when using [React Server Components](../how-to/react-server-components) because it allows you to provide information from `middleware` to your Server Components and Server Actions because they run in the same server execution context 🤯</docs-info>
+<docs-info>[`AsyncLocalStorage`][asynclocalstorage] is _especially_ powerful when using [React Server Components](../how-to/react-server-components) because it allows you to provide information from `middleware` to your Server Components and route actions because they run in the same server execution context 🤯</docs-info>
+
+<docs-warning>Do not rely on route middleware to provide access control for React Server Functions. Server Functions are not inherently associated with a route, and a client can call the same Server Function through a URL with different middleware. Server Functions must perform all of their own access control checks. Use a route `action` instead when you want middleware-driven access control.</docs-warning>
 
 ```tsx filename=app/user-context.ts
 import { AsyncLocalStorage } from "node:async_hooks";

package/docs/how-to/optimize-revalidation.md

@@ -1,12 +1,185 @@
 ---
 title: Revalidation Optimization
-hidden: true
 ---
 
-[copy pasted]
+# Revalidation Optimization
 
-During client-side transitions, React Router will optimize reloading of routes that are already rendering, like not reloading layout routes that aren't changing. In other cases, like form submissions or search param changes, React Router doesn't know which routes need to be reloaded, so it reloads them all to be safe. This ensures your UI always stays in sync with the state on your server.
+[MODES: framework, data]
 
-This function lets apps further optimize by returning `false` when React Router is about to reload a route. If you define this function on a route module, React Router will defer to your function on every navigation and every revalidation after an action is called. Again, this makes it possible for your UI to get out of sync with your server if you do it wrong, so be careful.
+<br/>
+<br/>
 
-`fetcher.load` calls also revalidate, but because they load a specific URL, they don't have to worry about route param or URL search param revalidations. `fetcher.load`'s only revalidate by default after action submissions and explicit revalidation requests via [`useRevalidator`][use-revalidator].
+After a mutation or some navigations, React Router re-runs loaders so
+the UI stays in sync with the server. That default is the right
+starting point. When a loader is expensive, or a mutation cannot
+affect that route's data, you can skip the reload.
+
+<docs-warning>
+Skipping revalidation can leave the UI out of sync with the server.
+Prefer targeting a specific action or navigation, and fall back to
+`defaultShouldRevalidate` instead of always returning `false`.
+</docs-warning>
+
+## Default behavior
+
+The default behavior differs between Framework and Data Modes:
+
+- **Framework Mode with SSR**
+  - Defaults to opt-out behavior - active loaders are revalidated on navigations and successful submissions ([`Link`][link], [`Form`][form], [`fetcher.submit`](fetcher-submit))
+  - Failed submissions returning a 4xx/5xx status do not trigger revalidations by default
+- **Framework "SPA Mode" and Data Mode**
+  - Defaults to opt-out behavior on successful submissions - active loaders are revalidated on successful submissions ([`Form`][form], [`fetcher.submit`])
+    - Failed submissions returning a 4xx/5xx status do not trigger revalidations by default
+  - Defaults to opt-in behavior for GET navigations ([`Link`][link]) - active loaders are only revalidated if their dynamic params changed, or if any search params changed
+    - A GET navigation to the _exact_ same URL is treated like a page refresh and all loaders are revalidated.
+
+Matched matched routes are handled independently - A child that skips
+revalidation does not skip any ancestor routes.
+
+[`fetcher.load`][use-fetcher] only revalidates by default after action
+submissions and explicit [`useRevalidator`][use-revalidator] calls, not
+on search-param or param-driven navigations.
+
+A plain `fetch()` to a [resource route][resource-routes] does not
+go through the router, so it does not revalidate loaders.
+
+## Skip a route with `shouldRevalidate`
+
+Export `shouldRevalidate` from the [route module][route-module]
+(Framework Mode) or set it on the [route object][data-mode]
+(Data Mode). Returning `false` skips **that route's** loader.
+
+```tsx filename=app/routes/dashboard.tsx
+// Framework Mode
+export function shouldRevalidate() {
+  return false;
+}
+```
+
+```tsx src/main.tsx
+// Data Mode
+createBrowserRouter([
+  {
+    path: "/dashboard",
+    loader: dashboardLoader,
+    shouldRevalidate: () => false,
+    Component: Dashboard,
+  },
+]);
+```
+
+Always returning `false` opts that route out of the default
+behavior completely, including cases you usually still want
+(param changes, explicit [`useRevalidator`][use-revalidator]).
+Prefer the conditional form below.
+
+## Opt out of specific requests
+
+Inspect
+[`ShouldRevalidateFunctionArgs`][should-revalidate-args]
+and return `defaultShouldRevalidate` for everything else.
+
+```tsx
+import type { ShouldRevalidateFunctionArgs } from "react-router";
+
+export function shouldRevalidate({
+  formMethod,
+  formAction,
+  defaultShouldRevalidate,
+}: ShouldRevalidateFunctionArgs) {
+  if (
+    formMethod === "POST" &&
+    formAction?.endsWith("/analytics")
+  ) {
+    return false;
+  }
+
+  return defaultShouldRevalidate;
+}
+```
+
+Other useful fields:
+
+- `formData`, `json`, `text` — the submission body
+- `actionResult`, `actionStatus` — the action's return value
+- `currentUrl`, `nextUrl`, `currentParams`, `nextParams` —
+  the navigation
+
+You can ignore search-param-only updates while still
+revalidating when the pathname changes:
+
+```tsx
+export function shouldRevalidate({
+  currentUrl,
+  nextUrl,
+  defaultShouldRevalidate,
+}: ShouldRevalidateFunctionArgs) {
+  if (currentUrl.pathname === nextUrl.pathname) {
+    return false;
+  }
+
+  return defaultShouldRevalidate;
+}
+```
+
+## Skip revalidation for one event
+
+Pass `defaultShouldRevalidate={false}` at the call site so you
+do not have to change every route file. This works on
+[`<Form>`][form], [`<Link>`][link], `<fetcher.Form>`, and as an
+option to [`useSubmit`][use-submit], `fetcher.submit`,
+[`useNavigate`][use-navigate], and
+[`useSearchParams`][use-search-params].
+
+```tsx
+import { Form, Link } from "react-router";
+
+<Link
+  to="/search?q=shoes"
+  defaultShouldRevalidate={false}
+>
+  Search Shoes
+</Link>
+
+<Form
+  method="post"
+  action="/analytics"
+  defaultShouldRevalidate={false}
+>
+  <button>Track Click</button>
+</Form>
+```
+
+```tsx
+fetcher.submit(
+  { intent: "save-progress" },
+  {
+    method: "post",
+    action: "/save-progress",
+    defaultShouldRevalidate: false,
+  },
+);
+```
+
+If a matched route does **not** export `shouldRevalidate`, this
+value is used directly for that loader. If it **does** export
+`shouldRevalidate`, the value is passed in as
+`defaultShouldRevalidate` and the route still has the final say.
+
+That is why a child `shouldRevalidate` that always returns
+`false` cannot hide a root reload after `fetcher.submit`. Either
+also opt `root` out for that case, or pass
+`defaultShouldRevalidate: false` at the call site when `root`
+has no `shouldRevalidate` of its own.
+
+[data-mode]: ../start/data/route-object#shouldrevalidate
+[form]: ../api/components/Form
+[link]: ../api/components/Link
+[resource-routes]: ./resource-routes
+[route-module]: ../start/framework/route-module#shouldrevalidate
+[should-revalidate-args]: https://api.reactrouter.com/v8/interfaces/react-router.ShouldRevalidateFunctionArgs.html
+[use-fetcher]: ../api/hooks/useFetcher
+[use-navigate]: ../api/hooks/useNavigate
+[use-revalidator]: ../api/hooks/useRevalidator
+[use-search-params]: ../api/hooks/useSearchParams
+[use-submit]: ../api/hooks/useSubmit

package/docs/how-to/react-server-components.md

@@ -498,16 +498,39 @@ Using Server Components in loaders can be helpful for incremental adoption of RS
 
 [Server Functions][react-server-functions-doc] are a React feature that allow you to call async functions executed on the server. They're defined with the [`"use server"`][use-server-docs] directive.
 
+<docs-warning>
+
+Treat every Server Function as a public endpoint. The client controls both the
+Server Function identifier and request URL, so do not rely on route middleware
+for authentication or authorization. Server Functions must perform their own
+access control and input validation; use a route `action` when access control
+should be middleware-driven.
+
+</docs-warning>
+
 ```tsx
 "use server";
 
+import { unstable_getRequest as getRequest } from "react-router";
+import { requireUser } from "./auth.ts";
+
 export async function updateFavorite(formData: FormData) {
-  let movieId = formData.get("id");
+  let user = await requireUser(getRequest());
+  let movieId = Number(formData.get("id"));
   let intent = formData.get("intent");
+
+  if (
+    !Number.isSafeInteger(movieId) ||
+    movieId <= 0 ||
+    (intent !== "add" && intent !== "remove")
+  ) {
+    throw new Error("Invalid form submission");
+  }
+
   if (intent === "add") {
-    await addFavorite(Number(movieId));
+    await addFavorite(user.id, movieId);
   } else {
-    await removeFavorite(Number(movieId));
+    await removeFavorite(user.id, movieId);
   }
 }
 ```

package/docs/how-to/resource-routes.md

@@ -66,6 +66,8 @@ export function action(_: Route.ActionArgs) {
 }
 ```
 
+Calling this `action` through [`<Form>`][form] or [`useFetcher`][fetcher] still revalidates matched UI loaders. A plain `fetch()` to the resource URL does not. See [Revalidation Optimization][optimize-revalidation] for more info.
+
 ## Return Types
 
 Resource Routes are flexible when it comes to the return type - you can return [`Response`][Response] instances or [`data()`][data] objects. A good general rule of thumb when deciding which type to use is:
@@ -124,3 +126,4 @@ export function action() {
 [form]: ../api/components/Form
 [await]: ../api/components/Await
 [error-boundary]: ../start/framework/route-module#errorboundary
+[optimize-revalidation]: ./optimize-revalidation