We don't yet officially support async/await in client components. (Refer to the RFC for more details: https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#why-cant-client-components-be-async-functions)

Confusingly, though, it does sometimes work, because the primitives are there to support it in the future.

However, if you accidentally render an async component on the client (for example, when refactoring a Server Component to a client one), React should fail gracefully. Right now, in some cases, it will instead crash the app by falling into an infinite loop.

Let's use this issue to track how we'll improve the DX for preventing async components (and async/await data fetching more generally) on the client.

This is not about implementing support for async/await on the client. Although we will probably do that eventually, for now we're just focused on making it fail more gracefully.

In the meantime, if you're using a Server Components enabled framework like Next.js, you should prefer to do as much data fetching as possible in Server Components. For the remaining client cases, use an established framework like useSWR or React Query.

• Detect and prevent an infinite loop caused by when uncached promise is rendered outside of a Suspense boundary.
• Add a warning if an uncached promise is detected outside of a transition.