@tanstack/react-router 1.167.5 → 1.168.0

package/dist/esm/Transitioner.js

@@ -1,8 +1,8 @@
 import { useLayoutEffect, usePrevious } from "./utils.js";
 import { useRouter } from "./useRouter.js";
-import { useRouterState } from "./useRouterState.js";
 import { getLocationChangeInfo, handleHashScroll, trimPathRight } from "@tanstack/router-core";
 import * as React$1 from "react";
+import { batch, useStore } from "@tanstack/react-store";
 //#region src/Transitioner.tsx
 function Transitioner() {
 	const router = useRouter();
@@ -11,13 +11,8 @@ function Transitioner() {
 		mounted: false
 	});
 	const [isTransitioning, setIsTransitioning] = React$1.useState(false);
-	const { hasPendingMatches, isLoading } = useRouterState({
-		select: (s) => ({
-			isLoading: s.isLoading,
-			hasPendingMatches: s.matches.some((d) => d.status === "pending")
-		}),
-		structuralSharing: true
-	});
+	const isLoading = useStore(router.stores.isLoading, (value) => value);
+	const hasPendingMatches = useStore(router.stores.hasPendingMatches, (value) => value);
 	const previousIsLoading = usePrevious(isLoading);
 	const isAnyPending = isLoading || isTransitioning || hasPendingMatches;
 	const previousIsAnyPending = usePrevious(isAnyPending);
@@ -66,7 +61,7 @@ function Transitioner() {
 	useLayoutEffect(() => {
 		if (previousIsLoading && !isLoading) router.emit({
 			type: "onLoad",
-			...getLocationChangeInfo(router.state)
+			...getLocationChangeInfo(router.stores.location.state, router.stores.resolvedLocation.state)
 		});
 	}, [
 		previousIsLoading,
@@ -76,7 +71,7 @@ function Transitioner() {
 	useLayoutEffect(() => {
 		if (previousIsPagePending && !isPagePending) router.emit({
 			type: "onBeforeRouteMount",
-			...getLocationChangeInfo(router.state)
+			...getLocationChangeInfo(router.stores.location.state, router.stores.resolvedLocation.state)
 		});
 	}, [
 		isPagePending,
@@ -85,16 +80,15 @@ function Transitioner() {
 	]);
 	useLayoutEffect(() => {
 		if (previousIsAnyPending && !isAnyPending) {
-			const changeInfo = getLocationChangeInfo(router.state);
+			const changeInfo = getLocationChangeInfo(router.stores.location.state, router.stores.resolvedLocation.state);
 			router.emit({
 				type: "onResolved",
 				...changeInfo
 			});
-			router.__store.setState((s) => ({
-				...s,
-				status: "idle",
-				resolvedLocation: s.location
-			}));
+			batch(() => {
+				router.stores.status.setState(() => "idle");
+				router.stores.resolvedLocation.setState(() => router.stores.location.state);
+			});
 			if (changeInfo.hrefChanged) handleHashScroll(router);
 		}
 	}, [

package/dist/esm/Transitioner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Transitioner.js","names":[],"sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  getLocationChangeInfo,\n  handleHashScroll,\n  trimPathRight,\n} from '@tanstack/router-core'\nimport { useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\n\nexport function Transitioner() {\n  const router = useRouter()\n  const mountLoadForRouter = React.useRef({ router, mounted: false })\n\n  const [isTransitioning, setIsTransitioning] = React.useState(false)\n  // Track pending state changes\n  const { hasPendingMatches, isLoading } = useRouterState({\n    select: (s) => ({\n      isLoading: s.isLoading,\n      hasPendingMatches: s.matches.some((d) => d.status === 'pending'),\n    }),\n    structuralSharing: true,\n  })\n\n  const previousIsLoading = usePrevious(isLoading)\n\n  const isAnyPending = isLoading || isTransitioning || hasPendingMatches\n  const previousIsAnyPending = usePrevious(isAnyPending)\n\n  const isPagePending = isLoading || hasPendingMatches\n  const previousIsPagePending = usePrevious(isPagePending)\n\n  router.startTransition = (fn: () => void) => {\n    setIsTransitioning(true)\n    React.startTransition(() => {\n      fn()\n      setIsTransitioning(false)\n    })\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  React.useEffect(() => {\n    const unsub = router.history.subscribe(router.load)\n\n    const nextLocation = router.buildLocation({\n      to: router.latestLocation.pathname,\n      search: true,\n      params: true,\n      hash: true,\n      state: true,\n      _includeValidateSearch: true,\n    })\n\n    // Check if the current URL matches the canonical form.\n    // Compare publicHref (browser-facing URL) for consistency with\n    // the server-side redirect check in router.beforeLoad.\n    if (\n      trimPathRight(router.latestLocation.publicHref) !==\n      trimPathRight(nextLocation.publicHref)\n    ) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n  }, [router, router.history])\n\n  // Try to load the initial location\n  useLayoutEffect(() => {\n    if (\n      // if we are hydrating from SSR, loading is triggered in ssr-client\n      (typeof window !== 'undefined' && router.ssr) ||\n      (mountLoadForRouter.current.router === router &&\n        mountLoadForRouter.current.mounted)\n    ) {\n      return\n    }\n    mountLoadForRouter.current = { router, mounted: true }\n\n    const tryLoad = async () => {\n      try {\n        await router.load()\n      } catch (err) {\n        console.error(err)\n      }\n    }\n\n    tryLoad()\n  }, [router])\n\n  useLayoutEffect(() => {\n    // The router was loading and now it's not\n    if (previousIsLoading && !isLoading) {\n      router.emit({\n        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches\n        ...getLocationChangeInfo(router.state),\n      })\n    }\n  }, [previousIsLoading, router, isLoading])\n\n  useLayoutEffect(() => {\n    // emit onBeforeRouteMount\n    if (previousIsPagePending && !isPagePending) {\n      router.emit({\n        type: 'onBeforeRouteMount',\n        ...getLocationChangeInfo(router.state),\n      })\n    }\n  }, [isPagePending, previousIsPagePending, router])\n\n  useLayoutEffect(() => {\n    if (previousIsAnyPending && !isAnyPending) {\n      const changeInfo = getLocationChangeInfo(router.state)\n      router.emit({\n        type: 'onResolved',\n        ...changeInfo,\n      })\n\n      router.__store.setState((s: typeof router.state) => ({\n        ...s,\n        status: 'idle',\n        resolvedLocation: s.location,\n      }))\n\n      if (changeInfo.hrefChanged) {\n        handleHashScroll(router)\n      }\n    }\n  }, [isAnyPending, previousIsAnyPending, router])\n\n  return null\n}\n"],"mappings":";;;;;;AAUA,SAAgB,eAAe;CAC7B,MAAM,SAAS,WAAW;CAC1B,MAAM,qBAAqB,QAAM,OAAO;EAAE;EAAQ,SAAS;EAAO,CAAC;CAEnE,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS,MAAM;CAEnE,MAAM,EAAE,mBAAmB,cAAc,eAAe;EACtD,SAAS,OAAO;GACd,WAAW,EAAE;GACb,mBAAmB,EAAE,QAAQ,MAAM,MAAM,EAAE,WAAW,UAAU;GACjE;EACD,mBAAmB;EACpB,CAAC;CAEF,MAAM,oBAAoB,YAAY,UAAU;CAEhD,MAAM,eAAe,aAAa,mBAAmB;CACrD,MAAM,uBAAuB,YAAY,aAAa;CAEtD,MAAM,gBAAgB,aAAa;CACnC,MAAM,wBAAwB,YAAY,cAAc;AAExD,QAAO,mBAAmB,OAAmB;AAC3C,qBAAmB,KAAK;AACxB,UAAM,sBAAsB;AAC1B,OAAI;AACJ,sBAAmB,MAAM;IACzB;;AAKJ,SAAM,gBAAgB;EACpB,MAAM,QAAQ,OAAO,QAAQ,UAAU,OAAO,KAAK;EAEnD,MAAM,eAAe,OAAO,cAAc;GACxC,IAAI,OAAO,eAAe;GAC1B,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,OAAO;GACP,wBAAwB;GACzB,CAAC;AAKF,MACE,cAAc,OAAO,eAAe,WAAW,KAC/C,cAAc,aAAa,WAAW,CAEtC,QAAO,eAAe;GAAE,GAAG;GAAc,SAAS;GAAM,CAAC;AAG3D,eAAa;AACX,UAAO;;IAER,CAAC,QAAQ,OAAO,QAAQ,CAAC;AAG5B,uBAAsB;AACpB,MAEG,OAAO,WAAW,eAAe,OAAO,OACxC,mBAAmB,QAAQ,WAAW,UACrC,mBAAmB,QAAQ,QAE7B;AAEF,qBAAmB,UAAU;GAAE;GAAQ,SAAS;GAAM;EAEtD,MAAM,UAAU,YAAY;AAC1B,OAAI;AACF,UAAM,OAAO,MAAM;YACZ,KAAK;AACZ,YAAQ,MAAM,IAAI;;;AAItB,WAAS;IACR,CAAC,OAAO,CAAC;AAEZ,uBAAsB;AAEpB,MAAI,qBAAqB,CAAC,UACxB,QAAO,KAAK;GACV,MAAM;GACN,GAAG,sBAAsB,OAAO,MAAM;GACvC,CAAC;IAEH;EAAC;EAAmB;EAAQ;EAAU,CAAC;AAE1C,uBAAsB;AAEpB,MAAI,yBAAyB,CAAC,cAC5B,QAAO,KAAK;GACV,MAAM;GACN,GAAG,sBAAsB,OAAO,MAAM;GACvC,CAAC;IAEH;EAAC;EAAe;EAAuB;EAAO,CAAC;AAElD,uBAAsB;AACpB,MAAI,wBAAwB,CAAC,cAAc;GACzC,MAAM,aAAa,sBAAsB,OAAO,MAAM;AACtD,UAAO,KAAK;IACV,MAAM;IACN,GAAG;IACJ,CAAC;AAEF,UAAO,QAAQ,UAAU,OAA4B;IACnD,GAAG;IACH,QAAQ;IACR,kBAAkB,EAAE;IACrB,EAAE;AAEH,OAAI,WAAW,YACb,kBAAiB,OAAO;;IAG3B;EAAC;EAAc;EAAsB;EAAO,CAAC;AAEhD,QAAO"}
+{"version":3,"file":"Transitioner.js","names":[],"sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { batch, useStore } from '@tanstack/react-store'\nimport {\n  getLocationChangeInfo,\n  handleHashScroll,\n  trimPathRight,\n} from '@tanstack/router-core'\nimport { useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\n\nexport function Transitioner() {\n  const router = useRouter()\n  const mountLoadForRouter = React.useRef({ router, mounted: false })\n\n  const [isTransitioning, setIsTransitioning] = React.useState(false)\n  // Track pending state changes\n  const isLoading = useStore(router.stores.isLoading, (value) => value)\n  const hasPendingMatches = useStore(\n    router.stores.hasPendingMatches,\n    (value) => value,\n  )\n\n  const previousIsLoading = usePrevious(isLoading)\n\n  const isAnyPending = isLoading || isTransitioning || hasPendingMatches\n  const previousIsAnyPending = usePrevious(isAnyPending)\n\n  const isPagePending = isLoading || hasPendingMatches\n  const previousIsPagePending = usePrevious(isPagePending)\n\n  router.startTransition = (fn: () => void) => {\n    setIsTransitioning(true)\n    React.startTransition(() => {\n      fn()\n      setIsTransitioning(false)\n    })\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  React.useEffect(() => {\n    const unsub = router.history.subscribe(router.load)\n\n    const nextLocation = router.buildLocation({\n      to: router.latestLocation.pathname,\n      search: true,\n      params: true,\n      hash: true,\n      state: true,\n      _includeValidateSearch: true,\n    })\n\n    // Check if the current URL matches the canonical form.\n    // Compare publicHref (browser-facing URL) for consistency with\n    // the server-side redirect check in router.beforeLoad.\n    if (\n      trimPathRight(router.latestLocation.publicHref) !==\n      trimPathRight(nextLocation.publicHref)\n    ) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n  }, [router, router.history])\n\n  // Try to load the initial location\n  useLayoutEffect(() => {\n    if (\n      // if we are hydrating from SSR, loading is triggered in ssr-client\n      (typeof window !== 'undefined' && router.ssr) ||\n      (mountLoadForRouter.current.router === router &&\n        mountLoadForRouter.current.mounted)\n    ) {\n      return\n    }\n    mountLoadForRouter.current = { router, mounted: true }\n\n    const tryLoad = async () => {\n      try {\n        await router.load()\n      } catch (err) {\n        console.error(err)\n      }\n    }\n\n    tryLoad()\n  }, [router])\n\n  useLayoutEffect(() => {\n    // The router was loading and now it's not\n    if (previousIsLoading && !isLoading) {\n      router.emit({\n        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches\n        ...getLocationChangeInfo(\n          router.stores.location.state,\n          router.stores.resolvedLocation.state,\n        ),\n      })\n    }\n  }, [previousIsLoading, router, isLoading])\n\n  useLayoutEffect(() => {\n    // emit onBeforeRouteMount\n    if (previousIsPagePending && !isPagePending) {\n      router.emit({\n        type: 'onBeforeRouteMount',\n        ...getLocationChangeInfo(\n          router.stores.location.state,\n          router.stores.resolvedLocation.state,\n        ),\n      })\n    }\n  }, [isPagePending, previousIsPagePending, router])\n\n  useLayoutEffect(() => {\n    if (previousIsAnyPending && !isAnyPending) {\n      const changeInfo = getLocationChangeInfo(\n        router.stores.location.state,\n        router.stores.resolvedLocation.state,\n      )\n      router.emit({\n        type: 'onResolved',\n        ...changeInfo,\n      })\n\n      batch(() => {\n        router.stores.status.setState(() => 'idle')\n        router.stores.resolvedLocation.setState(\n          () => router.stores.location.state,\n        )\n      })\n\n      if (changeInfo.hrefChanged) {\n        handleHashScroll(router)\n      }\n    }\n  }, [isAnyPending, previousIsAnyPending, router])\n\n  return null\n}\n"],"mappings":";;;;;;AAUA,SAAgB,eAAe;CAC7B,MAAM,SAAS,WAAW;CAC1B,MAAM,qBAAqB,QAAM,OAAO;EAAE;EAAQ,SAAS;EAAO,CAAC;CAEnE,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS,MAAM;CAEnE,MAAM,YAAY,SAAS,OAAO,OAAO,YAAY,UAAU,MAAM;CACrE,MAAM,oBAAoB,SACxB,OAAO,OAAO,oBACb,UAAU,MACZ;CAED,MAAM,oBAAoB,YAAY,UAAU;CAEhD,MAAM,eAAe,aAAa,mBAAmB;CACrD,MAAM,uBAAuB,YAAY,aAAa;CAEtD,MAAM,gBAAgB,aAAa;CACnC,MAAM,wBAAwB,YAAY,cAAc;AAExD,QAAO,mBAAmB,OAAmB;AAC3C,qBAAmB,KAAK;AACxB,UAAM,sBAAsB;AAC1B,OAAI;AACJ,sBAAmB,MAAM;IACzB;;AAKJ,SAAM,gBAAgB;EACpB,MAAM,QAAQ,OAAO,QAAQ,UAAU,OAAO,KAAK;EAEnD,MAAM,eAAe,OAAO,cAAc;GACxC,IAAI,OAAO,eAAe;GAC1B,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,OAAO;GACP,wBAAwB;GACzB,CAAC;AAKF,MACE,cAAc,OAAO,eAAe,WAAW,KAC/C,cAAc,aAAa,WAAW,CAEtC,QAAO,eAAe;GAAE,GAAG;GAAc,SAAS;GAAM,CAAC;AAG3D,eAAa;AACX,UAAO;;IAER,CAAC,QAAQ,OAAO,QAAQ,CAAC;AAG5B,uBAAsB;AACpB,MAEG,OAAO,WAAW,eAAe,OAAO,OACxC,mBAAmB,QAAQ,WAAW,UACrC,mBAAmB,QAAQ,QAE7B;AAEF,qBAAmB,UAAU;GAAE;GAAQ,SAAS;GAAM;EAEtD,MAAM,UAAU,YAAY;AAC1B,OAAI;AACF,UAAM,OAAO,MAAM;YACZ,KAAK;AACZ,YAAQ,MAAM,IAAI;;;AAItB,WAAS;IACR,CAAC,OAAO,CAAC;AAEZ,uBAAsB;AAEpB,MAAI,qBAAqB,CAAC,UACxB,QAAO,KAAK;GACV,MAAM;GACN,GAAG,sBACD,OAAO,OAAO,SAAS,OACvB,OAAO,OAAO,iBAAiB,MAChC;GACF,CAAC;IAEH;EAAC;EAAmB;EAAQ;EAAU,CAAC;AAE1C,uBAAsB;AAEpB,MAAI,yBAAyB,CAAC,cAC5B,QAAO,KAAK;GACV,MAAM;GACN,GAAG,sBACD,OAAO,OAAO,SAAS,OACvB,OAAO,OAAO,iBAAiB,MAChC;GACF,CAAC;IAEH;EAAC;EAAe;EAAuB;EAAO,CAAC;AAElD,uBAAsB;AACpB,MAAI,wBAAwB,CAAC,cAAc;GACzC,MAAM,aAAa,sBACjB,OAAO,OAAO,SAAS,OACvB,OAAO,OAAO,iBAAiB,MAChC;AACD,UAAO,KAAK;IACV,MAAM;IACN,GAAG;IACJ,CAAC;AAEF,eAAY;AACV,WAAO,OAAO,OAAO,eAAe,OAAO;AAC3C,WAAO,OAAO,iBAAiB,eACvB,OAAO,OAAO,SAAS,MAC9B;KACD;AAEF,OAAI,WAAW,YACb,kBAAiB,OAAO;;IAG3B;EAAC;EAAc;EAAsB;EAAO,CAAC;AAEhD,QAAO"}

package/dist/esm/headContentUtils.js

@@ -1,8 +1,107 @@
 import { useRouter } from "./useRouter.js";
-import { useRouterState } from "./useRouterState.js";
-import { escapeHtml } from "@tanstack/router-core";
+import { deepEqual, escapeHtml } from "@tanstack/router-core";
 import * as React$1 from "react";
+import { useStore } from "@tanstack/react-store";
+import { isServer } from "@tanstack/router-core/isServer";
 //#region src/headContentUtils.tsx
+function buildTagsFromMatches(router, nonce, matches) {
+	const routeMeta = matches.map((match) => match.meta).filter(Boolean);
+	const resultMeta = [];
+	const metaByAttribute = {};
+	let title;
+	for (let i = routeMeta.length - 1; i >= 0; i--) {
+		const metas = routeMeta[i];
+		for (let j = metas.length - 1; j >= 0; j--) {
+			const m = metas[j];
+			if (!m) continue;
+			if (m.title) {
+				if (!title) title = {
+					tag: "title",
+					children: m.title
+				};
+			} else if ("script:ld+json" in m) try {
+				const json = JSON.stringify(m["script:ld+json"]);
+				resultMeta.push({
+					tag: "script",
+					attrs: { type: "application/ld+json" },
+					children: escapeHtml(json)
+				});
+			} catch {}
+			else {
+				const attribute = m.name ?? m.property;
+				if (attribute) if (metaByAttribute[attribute]) continue;
+				else metaByAttribute[attribute] = true;
+				resultMeta.push({
+					tag: "meta",
+					attrs: {
+						...m,
+						nonce
+					}
+				});
+			}
+		}
+	}
+	if (title) resultMeta.push(title);
+	if (nonce) resultMeta.push({
+		tag: "meta",
+		attrs: {
+			property: "csp-nonce",
+			content: nonce
+		}
+	});
+	resultMeta.reverse();
+	const constructedLinks = matches.map((match) => match.links).filter(Boolean).flat(1).map((link) => ({
+		tag: "link",
+		attrs: {
+			...link,
+			nonce
+		}
+	}));
+	const manifest = router.ssr?.manifest;
+	const assetLinks = matches.map((match) => manifest?.routes[match.routeId]?.assets ?? []).filter(Boolean).flat(1).filter((asset) => asset.tag === "link").map((asset) => ({
+		tag: "link",
+		attrs: {
+			...asset.attrs,
+			suppressHydrationWarning: true,
+			nonce
+		}
+	}));
+	const preloadLinks = [];
+	matches.map((match) => router.looseRoutesById[match.routeId]).forEach((route) => router.ssr?.manifest?.routes[route.id]?.preloads?.filter(Boolean).forEach((preload) => {
+		preloadLinks.push({
+			tag: "link",
+			attrs: {
+				rel: "modulepreload",
+				href: preload,
+				nonce
+			}
+		});
+	}));
+	const styles = matches.map((match) => match.styles).flat(1).filter(Boolean).map(({ children, ...attrs }) => ({
+		tag: "style",
+		attrs: {
+			...attrs,
+			nonce
+		},
+		children
+	}));
+	const headScripts = matches.map((match) => match.headScripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
+		tag: "script",
+		attrs: {
+			...script,
+			nonce
+		},
+		children
+	}));
+	return uniqBy([
+		...resultMeta,
+		...preloadLinks,
+		...constructedLinks,
+		...assetLinks,
+		...styles,
+		...headScripts
+	], (d) => JSON.stringify(d));
+}
 /**
 * Build the list of head/link/meta/script tags to render for active matches.
 * Used internally by `HeadContent`.
@@ -10,9 +109,10 @@ import * as React$1 from "react";
 var useTags = () => {
 	const router = useRouter();
 	const nonce = router.options.ssr?.nonce;
-	const routeMeta = useRouterState({ select: (state) => {
-		return state.matches.map((match) => match.meta).filter(Boolean);
-	} });
+	if (isServer ?? router.isServer) return buildTagsFromMatches(router, nonce, router.stores.activeMatchesSnapshot.state);
+	const routeMeta = useStore(router.stores.activeMatchesSnapshot, (matches) => {
+		return matches.map((match) => match.meta).filter(Boolean);
+	}, deepEqual);
 	const meta = React$1.useMemo(() => {
 		const resultMeta = [];
 		const metaByAttribute = {};
@@ -60,67 +160,55 @@ var useTags = () => {
 		resultMeta.reverse();
 		return resultMeta;
 	}, [routeMeta, nonce]);
-	const links = useRouterState({
-		select: (state) => {
-			const constructed = state.matches.map((match) => match.links).filter(Boolean).flat(1).map((link) => ({
-				tag: "link",
-				attrs: {
-					...link,
-					nonce
-				}
-			}));
-			const manifest = router.ssr?.manifest;
-			const assets = state.matches.map((match) => manifest?.routes[match.routeId]?.assets ?? []).filter(Boolean).flat(1).filter((asset) => asset.tag === "link").map((asset) => ({
+	const links = useStore(router.stores.activeMatchesSnapshot, (matches) => {
+		const constructed = matches.map((match) => match.links).filter(Boolean).flat(1).map((link) => ({
+			tag: "link",
+			attrs: {
+				...link,
+				nonce
+			}
+		}));
+		const manifest = router.ssr?.manifest;
+		const assets = matches.map((match) => manifest?.routes[match.routeId]?.assets ?? []).filter(Boolean).flat(1).filter((asset) => asset.tag === "link").map((asset) => ({
+			tag: "link",
+			attrs: {
+				...asset.attrs,
+				suppressHydrationWarning: true,
+				nonce
+			}
+		}));
+		return [...constructed, ...assets];
+	}, deepEqual);
+	const preloadLinks = useStore(router.stores.activeMatchesSnapshot, (matches) => {
+		const preloadLinks = [];
+		matches.map((match) => router.looseRoutesById[match.routeId]).forEach((route) => router.ssr?.manifest?.routes[route.id]?.preloads?.filter(Boolean).forEach((preload) => {
+			preloadLinks.push({
 				tag: "link",
 				attrs: {
-					...asset.attrs,
-					suppressHydrationWarning: true,
+					rel: "modulepreload",
+					href: preload,
 					nonce
 				}
-			}));
-			return [...constructed, ...assets];
+			});
+		}));
+		return preloadLinks;
+	}, deepEqual);
+	const styles = useStore(router.stores.activeMatchesSnapshot, (matches) => matches.map((match) => match.styles).flat(1).filter(Boolean).map(({ children, ...attrs }) => ({
+		tag: "style",
+		attrs: {
+			...attrs,
+			nonce
 		},
-		structuralSharing: true
-	});
-	const preloadLinks = useRouterState({
-		select: (state) => {
-			const preloadLinks = [];
-			state.matches.map((match) => router.looseRoutesById[match.routeId]).forEach((route) => router.ssr?.manifest?.routes[route.id]?.preloads?.filter(Boolean).forEach((preload) => {
-				preloadLinks.push({
-					tag: "link",
-					attrs: {
-						rel: "modulepreload",
-						href: preload,
-						nonce
-					}
-				});
-			}));
-			return preloadLinks;
+		children
+	})), deepEqual);
+	const headScripts = useStore(router.stores.activeMatchesSnapshot, (matches) => matches.map((match) => match.headScripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
+		tag: "script",
+		attrs: {
+			...script,
+			nonce
 		},
-		structuralSharing: true
-	});
-	const styles = useRouterState({
-		select: (state) => state.matches.map((match) => match.styles).flat(1).filter(Boolean).map(({ children, ...attrs }) => ({
-			tag: "style",
-			attrs: {
-				...attrs,
-				nonce
-			},
-			children
-		})),
-		structuralSharing: true
-	});
-	const headScripts = useRouterState({
-		select: (state) => state.matches.map((match) => match.headScripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
-			tag: "script",
-			attrs: {
-				...script,
-				nonce
-			},
-			children
-		})),
-		structuralSharing: true
-	});
+		children
+	})), deepEqual);
 	return uniqBy([
 		...meta,
 		...preloadLinks,

package/dist/esm/headContentUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"headContentUtils.js","names":[],"sources":["../../src/headContentUtils.tsx"],"sourcesContent":["import * as React from 'react'\nimport { escapeHtml } from '@tanstack/router-core'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\n/**\n * Build the list of head/link/meta/script tags to render for active matches.\n * Used internally by `HeadContent`.\n */\nexport const useTags = () => {\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  const routeMeta = useRouterState({\n    select: (state) => {\n      return state.matches.map((match) => match.meta!).filter(Boolean)\n    },\n  })\n\n  const meta: Array<RouterManagedTag> = React.useMemo(() => {\n    const resultMeta: Array<RouterManagedTag> = []\n    const metaByAttribute: Record<string, true> = {}\n    let title: RouterManagedTag | undefined\n    for (let i = routeMeta.length - 1; i >= 0; i--) {\n      const metas = routeMeta[i]!\n      for (let j = metas.length - 1; j >= 0; j--) {\n        const m = metas[j]\n        if (!m) continue\n\n        if (m.title) {\n          if (!title) {\n            title = {\n              tag: 'title',\n              children: m.title,\n            }\n          }\n        } else if ('script:ld+json' in m) {\n          // Handle JSON-LD structured data\n          // Content is HTML-escaped to prevent XSS when injected via dangerouslySetInnerHTML\n          try {\n            const json = JSON.stringify(m['script:ld+json'])\n            resultMeta.push({\n              tag: 'script',\n              attrs: {\n                type: 'application/ld+json',\n              },\n              children: escapeHtml(json),\n            })\n          } catch {\n            // Skip invalid JSON-LD objects\n          }\n        } else {\n          const attribute = m.name ?? m.property\n          if (attribute) {\n            if (metaByAttribute[attribute]) {\n              continue\n            } else {\n              metaByAttribute[attribute] = true\n            }\n          }\n\n          resultMeta.push({\n            tag: 'meta',\n            attrs: {\n              ...m,\n              nonce,\n            },\n          })\n        }\n      }\n    }\n\n    if (title) {\n      resultMeta.push(title)\n    }\n\n    if (nonce) {\n      resultMeta.push({\n        tag: 'meta',\n        attrs: {\n          property: 'csp-nonce',\n          content: nonce,\n        },\n      })\n    }\n    resultMeta.reverse()\n\n    return resultMeta\n  }, [routeMeta, nonce])\n\n  const links = useRouterState({\n    select: (state) => {\n      const constructed = state.matches\n        .map((match) => match.links!)\n        .filter(Boolean)\n        .flat(1)\n        .map((link) => ({\n          tag: 'link',\n          attrs: {\n            ...link,\n            nonce,\n          },\n        })) satisfies Array<RouterManagedTag>\n\n      const manifest = router.ssr?.manifest\n\n      // These are the assets extracted from the ViteManifest\n      // using the `startManifestPlugin`\n      const assets = state.matches\n        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n        .filter(Boolean)\n        .flat(1)\n        .filter((asset) => asset.tag === 'link')\n        .map(\n          (asset) =>\n            ({\n              tag: 'link',\n              attrs: {\n                ...asset.attrs,\n                suppressHydrationWarning: true,\n                nonce,\n              },\n            }) satisfies RouterManagedTag,\n        )\n\n      return [...constructed, ...assets]\n    },\n    structuralSharing: true as any,\n  })\n\n  const preloadLinks = useRouterState({\n    select: (state) => {\n      const preloadLinks: Array<RouterManagedTag> = []\n\n      state.matches\n        .map((match) => router.looseRoutesById[match.routeId]!)\n        .forEach((route) =>\n          router.ssr?.manifest?.routes[route.id]?.preloads\n            ?.filter(Boolean)\n            .forEach((preload) => {\n              preloadLinks.push({\n                tag: 'link',\n                attrs: {\n                  rel: 'modulepreload',\n                  href: preload,\n                  nonce,\n                },\n              })\n            }),\n        )\n\n      return preloadLinks\n    },\n    structuralSharing: true as any,\n  })\n\n  const styles = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.styles!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...attrs }) => ({\n        tag: 'style',\n        attrs: {\n          ...attrs,\n          nonce,\n        },\n        children,\n      })),\n    structuralSharing: true as any,\n  })\n\n  const headScripts: Array<RouterManagedTag> = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.headScripts!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...script }) => ({\n        tag: 'script',\n        attrs: {\n          ...script,\n          nonce,\n        },\n        children,\n      })),\n    structuralSharing: true as any,\n  })\n\n  return uniqBy(\n    [\n      ...meta,\n      ...preloadLinks,\n      ...links,\n      ...styles,\n      ...headScripts,\n    ] as Array<RouterManagedTag>,\n    (d) => {\n      return JSON.stringify(d)\n    },\n  )\n}\n\nexport function uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {\n  const seen = new Set<string>()\n  return arr.filter((item) => {\n    const key = fn(item)\n    if (seen.has(key)) {\n      return false\n    }\n    seen.add(key)\n    return true\n  })\n}\n"],"mappings":"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"}
+{"version":3,"file":"headContentUtils.js","names":[],"sources":["../../src/headContentUtils.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { deepEqual, escapeHtml } from '@tanstack/router-core'\nimport { isServer } from '@tanstack/router-core/isServer'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\nfunction buildTagsFromMatches(\n  router: ReturnType<typeof useRouter>,\n  nonce: string | undefined,\n  matches: Array<any>,\n): Array<RouterManagedTag> {\n  const routeMeta = matches.map((match) => match.meta!).filter(Boolean)\n\n  const resultMeta: Array<RouterManagedTag> = []\n  const metaByAttribute: Record<string, true> = {}\n  let title: RouterManagedTag | undefined\n  for (let i = routeMeta.length - 1; i >= 0; i--) {\n    const metas = routeMeta[i]!\n    for (let j = metas.length - 1; j >= 0; j--) {\n      const m = metas[j]\n      if (!m) continue\n\n      if (m.title) {\n        if (!title) {\n          title = {\n            tag: 'title',\n            children: m.title,\n          }\n        }\n      } else if ('script:ld+json' in m) {\n        try {\n          const json = JSON.stringify(m['script:ld+json'])\n          resultMeta.push({\n            tag: 'script',\n            attrs: {\n              type: 'application/ld+json',\n            },\n            children: escapeHtml(json),\n          })\n        } catch {\n          // Skip invalid JSON-LD objects\n        }\n      } else {\n        const attribute = m.name ?? m.property\n        if (attribute) {\n          if (metaByAttribute[attribute]) {\n            continue\n          } else {\n            metaByAttribute[attribute] = true\n          }\n        }\n\n        resultMeta.push({\n          tag: 'meta',\n          attrs: {\n            ...m,\n            nonce,\n          },\n        })\n      }\n    }\n  }\n\n  if (title) {\n    resultMeta.push(title)\n  }\n\n  if (nonce) {\n    resultMeta.push({\n      tag: 'meta',\n      attrs: {\n        property: 'csp-nonce',\n        content: nonce,\n      },\n    })\n  }\n  resultMeta.reverse()\n\n  const constructedLinks = matches\n    .map((match) => match.links!)\n    .filter(Boolean)\n    .flat(1)\n    .map((link) => ({\n      tag: 'link',\n      attrs: {\n        ...link,\n        nonce,\n      },\n    })) satisfies Array<RouterManagedTag>\n\n  const manifest = router.ssr?.manifest\n  const assetLinks = matches\n    .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n    .filter(Boolean)\n    .flat(1)\n    .filter((asset) => asset.tag === 'link')\n    .map(\n      (asset) =>\n        ({\n          tag: 'link',\n          attrs: {\n            ...asset.attrs,\n            suppressHydrationWarning: true,\n            nonce,\n          },\n        }) satisfies RouterManagedTag,\n    )\n\n  const preloadLinks: Array<RouterManagedTag> = []\n  matches\n    .map((match) => router.looseRoutesById[match.routeId]!)\n    .forEach((route) =>\n      router.ssr?.manifest?.routes[route.id]?.preloads\n        ?.filter(Boolean)\n        .forEach((preload) => {\n          preloadLinks.push({\n            tag: 'link',\n            attrs: {\n              rel: 'modulepreload',\n              href: preload,\n              nonce,\n            },\n          })\n        }),\n    )\n\n  const styles = (\n    matches\n      .map((match) => match.styles!)\n      .flat(1)\n      .filter(Boolean) as Array<RouterManagedTag>\n  ).map(({ children, ...attrs }) => ({\n    tag: 'style',\n    attrs: {\n      ...attrs,\n      nonce,\n    },\n    children,\n  }))\n\n  const headScripts = (\n    matches\n      .map((match) => match.headScripts!)\n      .flat(1)\n      .filter(Boolean) as Array<RouterManagedTag>\n  ).map(({ children, ...script }) => ({\n    tag: 'script',\n    attrs: {\n      ...script,\n      nonce,\n    },\n    children,\n  }))\n\n  return uniqBy(\n    [\n      ...resultMeta,\n      ...preloadLinks,\n      ...constructedLinks,\n      ...assetLinks,\n      ...styles,\n      ...headScripts,\n    ] as Array<RouterManagedTag>,\n    (d) => JSON.stringify(d),\n  )\n}\n\n/**\n * Build the list of head/link/meta/script tags to render for active matches.\n * Used internally by `HeadContent`.\n */\nexport const useTags = () => {\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n\n  if (isServer ?? router.isServer) {\n    return buildTagsFromMatches(\n      router,\n      nonce,\n      router.stores.activeMatchesSnapshot.state,\n    )\n  }\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static\n  const routeMeta = useStore(\n    router.stores.activeMatchesSnapshot,\n    (matches) => {\n      return matches.map((match) => match.meta!).filter(Boolean)\n    },\n    deepEqual,\n  )\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static\n  const meta: Array<RouterManagedTag> = React.useMemo(() => {\n    const resultMeta: Array<RouterManagedTag> = []\n    const metaByAttribute: Record<string, true> = {}\n    let title: RouterManagedTag | undefined\n    for (let i = routeMeta.length - 1; i >= 0; i--) {\n      const metas = routeMeta[i]!\n      for (let j = metas.length - 1; j >= 0; j--) {\n        const m = metas[j]\n        if (!m) continue\n\n        if (m.title) {\n          if (!title) {\n            title = {\n              tag: 'title',\n              children: m.title,\n            }\n          }\n        } else if ('script:ld+json' in m) {\n          // Handle JSON-LD structured data\n          // Content is HTML-escaped to prevent XSS when injected via dangerouslySetInnerHTML\n          try {\n            const json = JSON.stringify(m['script:ld+json'])\n            resultMeta.push({\n              tag: 'script',\n              attrs: {\n                type: 'application/ld+json',\n              },\n              children: escapeHtml(json),\n            })\n          } catch {\n            // Skip invalid JSON-LD objects\n          }\n        } else {\n          const attribute = m.name ?? m.property\n          if (attribute) {\n            if (metaByAttribute[attribute]) {\n              continue\n            } else {\n              metaByAttribute[attribute] = true\n            }\n          }\n\n          resultMeta.push({\n            tag: 'meta',\n            attrs: {\n              ...m,\n              nonce,\n            },\n          })\n        }\n      }\n    }\n\n    if (title) {\n      resultMeta.push(title)\n    }\n\n    if (nonce) {\n      resultMeta.push({\n        tag: 'meta',\n        attrs: {\n          property: 'csp-nonce',\n          content: nonce,\n        },\n      })\n    }\n    resultMeta.reverse()\n\n    return resultMeta\n  }, [routeMeta, nonce])\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static\n  const links = useStore(\n    router.stores.activeMatchesSnapshot,\n    (matches) => {\n      const constructed = matches\n        .map((match) => match.links!)\n        .filter(Boolean)\n        .flat(1)\n        .map((link) => ({\n          tag: 'link',\n          attrs: {\n            ...link,\n            nonce,\n          },\n        })) satisfies Array<RouterManagedTag>\n\n      const manifest = router.ssr?.manifest\n\n      // These are the assets extracted from the ViteManifest\n      // using the `startManifestPlugin`\n      const assets = matches\n        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n        .filter(Boolean)\n        .flat(1)\n        .filter((asset) => asset.tag === 'link')\n        .map(\n          (asset) =>\n            ({\n              tag: 'link',\n              attrs: {\n                ...asset.attrs,\n                suppressHydrationWarning: true,\n                nonce,\n              },\n            }) satisfies RouterManagedTag,\n        )\n\n      return [...constructed, ...assets]\n    },\n    deepEqual,\n  )\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static\n  const preloadLinks = useStore(\n    router.stores.activeMatchesSnapshot,\n    (matches) => {\n      const preloadLinks: Array<RouterManagedTag> = []\n\n      matches\n        .map((match) => router.looseRoutesById[match.routeId]!)\n        .forEach((route) =>\n          router.ssr?.manifest?.routes[route.id]?.preloads\n            ?.filter(Boolean)\n            .forEach((preload) => {\n              preloadLinks.push({\n                tag: 'link',\n                attrs: {\n                  rel: 'modulepreload',\n                  href: preload,\n                  nonce,\n                },\n              })\n            }),\n        )\n\n      return preloadLinks\n    },\n    deepEqual,\n  )\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static\n  const styles = useStore(\n    router.stores.activeMatchesSnapshot,\n    (matches) =>\n      (\n        matches\n          .map((match) => match.styles!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...attrs }) => ({\n        tag: 'style',\n        attrs: {\n          ...attrs,\n          nonce,\n        },\n        children,\n      })),\n    deepEqual,\n  )\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static\n  const headScripts: Array<RouterManagedTag> = useStore(\n    router.stores.activeMatchesSnapshot,\n    (matches) =>\n      (\n        matches\n          .map((match) => match.headScripts!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...script }) => ({\n        tag: 'script',\n        attrs: {\n          ...script,\n          nonce,\n        },\n        children,\n      })),\n    deepEqual,\n  )\n\n  return uniqBy(\n    [\n      ...meta,\n      ...preloadLinks,\n      ...links,\n      ...styles,\n      ...headScripts,\n    ] as Array<RouterManagedTag>,\n    (d) => {\n      return JSON.stringify(d)\n    },\n  )\n}\n\nexport function uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {\n  const seen = new Set<string>()\n  return arr.filter((item) => {\n    const key = fn(item)\n    if (seen.has(key)) {\n      return false\n    }\n    seen.add(key)\n    return true\n  })\n}\n"],"mappings":"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"}

package/dist/esm/index.dev.js

@@ -2,7 +2,6 @@ import { Await, useAwaited } from "./awaited.js";
 import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
 import { ClientOnly, useHydrated } from "./ClientOnly.js";
 import { useRouter } from "./useRouter.js";
-import { useRouterState } from "./useRouterState.js";
 import { useMatch } from "./useMatch.js";
 import { useLoaderData } from "./useLoaderData.js";
 import { useLoaderDeps } from "./useLoaderDeps.js";
@@ -22,6 +21,7 @@ import { Router, createRouter } from "./router.js";
 import { RouterContextProvider, RouterProvider } from "./RouterProvider.js";
 import { ScrollRestoration, useElementScrollRestoration } from "./ScrollRestoration.js";
 import { Block, useBlocker } from "./useBlocker.js";
+import { useRouterState } from "./useRouterState.js";
 import { useLocation } from "./useLocation.js";
 import { useCanGoBack } from "./useCanGoBack.js";
 import { Asset } from "./Asset.js";

package/dist/esm/index.js

@@ -2,7 +2,6 @@ import { Await, useAwaited } from "./awaited.js";
 import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
 import { ClientOnly, useHydrated } from "./ClientOnly.js";
 import { useRouter } from "./useRouter.js";
-import { useRouterState } from "./useRouterState.js";
 import { useMatch } from "./useMatch.js";
 import { useLoaderData } from "./useLoaderData.js";
 import { useLoaderDeps } from "./useLoaderDeps.js";
@@ -22,6 +21,7 @@ import { Router, createRouter } from "./router.js";
 import { RouterContextProvider, RouterProvider } from "./RouterProvider.js";
 import { ScrollRestoration, useElementScrollRestoration } from "./ScrollRestoration.js";
 import { Block, useBlocker } from "./useBlocker.js";
+import { useRouterState } from "./useRouterState.js";
 import { useLocation } from "./useLocation.js";
 import { useCanGoBack } from "./useCanGoBack.js";
 import { Asset } from "./Asset.js";

package/dist/esm/link.js

@@ -1,10 +1,10 @@
 import { useForwardedRef, useIntersectionObserver } from "./utils.js";
 import { useHydrated } from "./ClientOnly.js";
 import { useRouter } from "./useRouter.js";
-import { useRouterState } from "./useRouterState.js";
 import { deepEqual, exactPathTest, functionalUpdate, isDangerousProtocol, preloadWarning, removeTrailingSlash } from "@tanstack/router-core";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
+import { useStore } from "@tanstack/react-store";
 import { isServer } from "@tanstack/router-core/isServer";
 import { flushSync } from "react-dom";
 //#region src/link.tsx
@@ -78,7 +78,7 @@ function useLinkProps(options, forwardedRef) {
 		})();
 		const isActive = (() => {
 			if (externalLink) return false;
-			const currentLocation = router.state.location;
+			const currentLocation = router.stores.location.state;
 			const exact = activeOptions?.exact ?? false;
 			if (exact) {
 				if (!exactPathTest(currentLocation.pathname, next.pathname, router.basepath)) return false;
@@ -154,27 +154,9 @@ function useLinkProps(options, forwardedRef) {
 		};
 	}
 	const isHydrated = useHydrated();
-	const currentLocationState = useRouterState({
-		select: (s) => {
-			const leaf = s.matches[s.matches.length - 1];
-			return {
-				search: leaf?.search,
-				hash: s.location.hash,
-				path: leaf?.pathname
-			};
-		},
-		structuralSharing: true
-	});
-	const from = options.from;
-	const _options = React$1.useMemo(() => {
-		return {
-			...options,
-			from
-		};
-	}, [
+	const _options = React$1.useMemo(() => options, [
 		router,
-		currentLocationState,
-		from,
+		options.from,
 		options._fromLocation,
 		options.hash,
 		options.to,
@@ -184,7 +166,18 @@ function useLinkProps(options, forwardedRef) {
 		options.mask,
 		options.unsafeRelative
 	]);
-	const next = React$1.useMemo(() => router.buildLocation({ ..._options }), [router, _options]);
+	const currentLocation = useStore(router.stores.location, (l) => l, (prev, next) => prev.href === next.href);
+	const next = React$1.useMemo(() => {
+		const opts = {
+			_fromLocation: currentLocation,
+			..._options
+		};
+		return router.buildLocation(opts);
+	}, [
+		router,
+		currentLocation,
+		_options
+	]);
 	const hrefOptionPublicHref = next.maskedLocation ? next.maskedLocation.publicHref : next.publicHref;
 	const hrefOptionExternal = next.maskedLocation ? next.maskedLocation.external : next.external;
 	const hrefOption = React$1.useMemo(() => getHrefOption(hrefOptionPublicHref, hrefOptionExternal, router.history, disabled), [
@@ -216,24 +209,36 @@ function useLinkProps(options, forwardedRef) {
 		hrefOption,
 		router.protocolAllowlist
 	]);
-	const isActive = useRouterState({ select: (s) => {
+	const isActive = React$1.useMemo(() => {
 		if (externalLink) return false;
 		if (activeOptions?.exact) {
-			if (!exactPathTest(s.location.pathname, next.pathname, router.basepath)) return false;
+			if (!exactPathTest(currentLocation.pathname, next.pathname, router.basepath)) return false;
 		} else {
-			const currentPathSplit = removeTrailingSlash(s.location.pathname, router.basepath);
+			const currentPathSplit = removeTrailingSlash(currentLocation.pathname, router.basepath);
 			const nextPathSplit = removeTrailingSlash(next.pathname, router.basepath);
 			if (!(currentPathSplit.startsWith(nextPathSplit) && (currentPathSplit.length === nextPathSplit.length || currentPathSplit[nextPathSplit.length] === "/"))) return false;
 		}
 		if (activeOptions?.includeSearch ?? true) {
-			if (!deepEqual(s.location.search, next.search, {
+			if (!deepEqual(currentLocation.search, next.search, {
 				partial: !activeOptions?.exact,
 				ignoreUndefined: !activeOptions?.explicitUndefined
 			})) return false;
 		}
-		if (activeOptions?.includeHash) return isHydrated && s.location.hash === next.hash;
+		if (activeOptions?.includeHash) return isHydrated && currentLocation.hash === next.hash;
 		return true;
-	} });
+	}, [
+		activeOptions?.exact,
+		activeOptions?.explicitUndefined,
+		activeOptions?.includeHash,
+		activeOptions?.includeSearch,
+		currentLocation,
+		externalLink,
+		isHydrated,
+		next.hash,
+		next.pathname,
+		next.search,
+		router.basepath
+	]);
 	const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? STATIC_ACTIVE_OBJECT : STATIC_EMPTY_OBJECT;
 	const resolvedInactiveProps = isActive ? STATIC_EMPTY_OBJECT : functionalUpdate(inactiveProps, {}) ?? STATIC_EMPTY_OBJECT;
 	const resolvedClassName = [