Conditional component rendering issue with React Compiler enabled

[marwinhormiz]

Describe the bug
I have a simple debouncing hook with an text input exactly like the example shown in the documentation. I want to render a loading spinner when isPending returns true, but it won't render if I have React Compiler enabled (using Next.JS 15). The condition is simple, check if isPending returns true and render the component. Works fine if I turn off the React Compiler.

One thing to point out is that if you try to render raw text with React Compiler enabled then it works but not if you try to return any JSX.
So <>{isPending() && 'Hello World'}</> renders fine.

To Reproduce
Enable React Compiler in Next.JS configuration.
Try to conditionally render a component when isPending returns true.

Expected behavior
Th expected behavior is that the loading spinner component should be rendered when isPending returns true with React Compiler enabled.

use-debounce version:
10.0.4

[xnimorz]

Hello @marwinhormiz

Can I ask you to prepare codesandbox with the issue? It would allow me to iterate on the issue, instead of setting up all the environment required to repro, thanks.