Repository navigation
Bug: Don't crash the app if an async component is accidentally used on the client #26801
Description
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.
Activity
KaramveerSidhu commentedon May 21, 2023
@acdlite Thank you for opening this issue and having a look in this direction. This is something that's really required.
saudpunjwani101 commentedon Jun 6, 2023
I'm still "Error: Not implemented. at Object.getCacheForType" on the server when cache the fetch with "use".
const fetchCities = cache(() => fetch(
${getAnalyticsUrl()}/rest/cities))const CitiesPage = () => {
let cities = use(fetchCities())
...
It works on the client though.
Detect crashes caused by Async Client Components (#27019)
Detect crashes caused by Async Client Components (#27019)
natsandbox commentedon Jul 11, 2023
I am using Next.js and I accidentally put 'use client' and async together and the page was rending well.
However when I made a change with the page open in the browser and recompiled the browser completely froze up.
If I made changes and recompiled without having the page in question open, it would recompile without issues.
Detect crashes caused by Async Client Components (#27019)
Detect crashes caused by Async Client Components (react#27019)
Detect crashes caused by Async Client Components (#27019)