Problems using the compiler at Stack Auth

[N2D4]

First of all, we're super excited for a future with the compiler, and can't wait to support Stack Auth with it.

However, in our client SDK, we have a lot of APIs that use promises. Code might look like this:

const user = await getUser({ or: 'redirect' });
const connection = await user.getConnectedAccount('facebook', { or: 'redirect' });
const token = await connection.getAccessToken();

Since we target React natively, we provide hook-based counterparts:

export default function MyClientComponent() {
  const user = useUser({ or: 'redirect' });
  const connection = user.useConnectedAccount('facebook', { or: 'redirect' });
  const token = connection.useAccessToken();

  return token;
}

This is a very powerful pattern. It lets us model large data structures without exposing our users to too much complexity; also, it means the hook-based SDK is consistent with the Promise-based one.

Notably, this pattern can align with the rules of React; useConnectedAccount is on the prototype of User, just called with different this arguments. We never need to actually pass the hook around as a value.

Unfortunately the new React compiler's static analysis throws an error:

Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks

It's true that this could be the case (for some implementation of useUser), but also there's no way for us as library authors to tell the compiler that the hook is safe to call. I would say the most common case is that useConnectedAccount(...) is a function on the User prototype, and that it's always the same (with different this arguments).

Disabling the compiler on our side is not an option; this is code that our users write, and the errors will be thrown on their side.

[aleclarson]

What does the compiler output look like?

[N2D4]

Playground:

InvalidReact: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks (3:3)

[suhaotian]

this means you shouldn’t write higher order Hooks:
https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-mutate-a-hook

[N2D4]

Right, though in this case the returned hook is always the same (and not dynamically mutated). It would be useful if there was a way to achieve this.

[guillaumebrunerie]

Can you change the API a bit so that useConnectedAccount is an independent function instead of being a method? So that you would write the following instead:

const connection = useConnectedAccount(user, 'facebook', { or: 'redirect' });