confirmation prompt double renders using react-aria routing

[aryaniyaps]

20250730-1333-02.8536555.mp4

when im using react-aria components, and passing the href like so:

<Tabs
					aria-label="Job Settings Navigation"
					isVertical
					variant="light"
					selectedKey={pathname}
					classNames={{
						tabWrapper: "w-full",
						base: "w-full",
						tabContent: "w-full",
						tabList: "w-full",
						panel: "h-full",
						tab: "py-5",
						cursor: "shadow-none",
					}}
				>
					<Tab
						key={links.jobDetailSettings(params.slug)}
						href={links.jobDetailSettings(params.slug)}
						title={
							<div className="flex items-center space-x-4">
								<Settings size={20} />
								<span>General</span>
							</div>
						}
					/>
					{data.organization.job.externalApplicationUrl === null && (
						<Tab
							key={links.jobDetailSettingsApplicationForm(params.slug)}
							href={links.jobDetailSettingsApplicationForm(params.slug)}
							title={
								<div className="flex items-center space-x-4">
									<FileText size={20} />
									<span>Screening Questions</span>
								</div>
							}
						/>
					)}
				</Tabs>

(Im using HeroUI, which is a wrapper around react-aria)

I get double renders.

this is how Im configuring my routing:

function InnerProviders({
	children,
	headersPromise,
}: {
	children: React.ReactNode;
	headersPromise: Promise<ReadonlyHeaders>;
}) {
	const router = useRouter();
	const environment = useMemo(() => {
		return getCurrentEnvironment();
	}, []);

	return (
		<NavigationGuardProvider>
			<HeroUIProvider navigate={router.push}>
					<RelayEnvironmentProvider environment={environment}>
								{children}
					</RelayEnvironmentProvider>
			</HeroUIProvider>
		</NavigationGuardProvider>
	);
}

this is how client side routing works in react-aria:

https://react-spectrum.adobe.com/react-aria/routing.html

could this double render be fixed? is this a user land issue or something the library doesn't support yet?

I have confirmed this isn't due to react strict mode, as this happens in production too

Nextjs Version: 15.4.5
Next-Navigation-Guard version: v0.2

[Junk-debug]

+1

[Junk-debug]

find out this solution

type UseNavigationGuard = typeof useNavigationGuard;
type UseNavigationGuardOptions = Parameters<typeof useNavigationGuard>[0];
type Return = ReturnType<UseNavigationGuard>;

type Options = Omit<UseNavigationGuardOptions, 'confirm'> & {
  confirm: NonNullable<UseNavigationGuardOptions['confirm']>;
};

type UseFixedNavigationGuard = (options: Options) => Return;

const useFixedNavigationGuard: UseFixedNavigationGuard = (options) => {
  const [hasCalled, setHasCalled] = useState<boolean>(false);

  return useNavigationGuard({
    ...options,
    confirm: async (params) => {
      if (hasCalled) {
        return false;
      }

      const isConfirmed = await options.confirm(params);

      flushSync(() => setHasCalled(true));

      setTimeout(() => {
        setHasCalled(false);
      }, 0);

      return isConfirmed;
    },
  });
};

[aryaniyaps]

thank you, this is a nice workaround, it would be nice to have this fixed in the library itself!

[leppaott]

I used:

enabled: () => enabled && !acceptedRef.current,
Only for dialoag accept/continue/OK where this happened.