Rules of hooks error in useLinkProps

[abeljohn]

Provide a general summary of the issue here

When a react-aria-components Link or any component using useLinkProps has its href change to or from undefined, a React error is thrown due to conditionally calling a hook. This only happens when using a custom useHref hook for client-side routing, as the default useHref implementation does not use any hooks internally.

🤔 Expected Behavior?

The href prop should be able to switch between undefined and having a value with no errors thrown, when using RouterProvider with a useHref hook (e.g. react-router).

😯 Current Behavior

If href switches from having a value to undefined, React throws the error Should have a queue. You are likely calling Hooks conditionally, which is not allowed. (https://react.dev/link/invalid-hook-call).

If href switches from undefined to having a value, Cannot read properties of undefined (reading 'length') is thrown from within React code (areHookInputsEqual).

💁 Possible Solution

It looks like calling router.useHref unconditionally in useSyntheticLinkProps and useLinkProps would fix it based on the stack traces.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/crazy-dubinsky-7p8hsy

Click either button to change the href prop of a Link

Version

"react-aria-components": "1.3.3"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Sonoma 14.5

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for reporting. This seems like the correct thing to do. I'm not sure why we conditionally called it originally. Would you like to open a PR for it?

[abeljohn]

Sure thing, I'll open a PR.

Looking into it a bit further, since the type of href is configurable via RouterConfig, and useHref expects a non-nullish value, there doesn't seem to be a perfect default value to pass into useHref. I'm going with an empty string as React Router and Tanstack Router both accept string values in their types, though it's still possible to use a RouterConfig that defines a different type for href that would be incompatible with the default empty string. The type of href that's derived from RouterConfig could be updated to RouterConfig extends {href: infer H} ? H | string : string to force a custom useHref function to accept a string parameter, but I'm not sure if that's the right approach. Open to suggestions!

[levrik]

@abeljohn Sadly that change broke my whole application after upgrading to React Aria Compoenents 1.5.0 as I'm using an object as type for href as suggested by @devongovett in #6587 (comment). I'll file a proper issue hopefully tomorrow!