Good catch documenting this — the React Compiler interaction is a subtle one.

For anyone else hitting this: the reason useState is required around createTRPCClient is that React Compiler (and even React's regular reconciliation) can re-evaluate expressions during rendering. Without useState, createTRPCClient gets called on every render, and the Compiler's optimizations can cause the returned proxy object to be accessed in unexpected ways (like reading .name on it for memoization keys).

The tRPC client is a Proxy object, so property access like client.name doesn't throw — it returns another proxy (which then gets called as a function by the tRPC internals, leading to the confusing client[procedureType] is not a function error).

The useState(() => createTRPCClient(...)) pattern ensures the client is created exactly once and the reference is stable across re-renders. This is the same pattern you'd use for any expensive-to-create object in React that shouldn't be recreated on every render.

Alternatively, if you're using the newer @trpc/tanstack-react-query integration, you can use useTRPC() which handles this for you via the provider setup.