Using use in a Server Component freezes
#42469
Comments
|
I am experiencing this too. |
|
From beta docs I remember |
|
@arackaf @pix303 probably because the awaited promise is not stable (referentially equal) between renders. A good explanation of what's happening can found in the RFC: https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#usepromise |
|
Just checked in on this with @sebmarkbage. The component you currently have is an // Async function server component
export const Todos: TodosType = async (props: Props) => {
const todos = await props.todos;
const colors = await props.colors;
return (
<section>
<TodoListFiltersHeader />
<ul>
{(todos?.data ?? []).map((todo, idx) => (
<li key={idx} style={{ color: colors.data[todo.color] }}>
{todo.name} - {todo.priority}
</li>
))}
</ul>
</section>
);
};
// Server Component
export const Todos: TodosType = (props: Props) => {
const todos = use(props.todos);
const colors = use(props.colors);
return (
<section>
<TodoListFiltersHeader />
<ul>
{(todos?.data ?? []).map((todo, idx) => (
<li key={idx} style={{ color: colors.data[todo.color] }}>
{todo.name} - {todo.priority}
</li>
))}
</ul>
</section>
);
}; |
|
@timneutkens thanks a ton! fwiw, my feedback would be that if it's not possible to get Am I correct in assuming this breaks since, under the covers, |
To be clear: you can use However there's no reason for it to crash with an out-of-memory exception. React should throw an error with a helpful message. We'll fix that. |
|
Is it okay to leave this open so that we have something to track implementing the lint rule and can get back to you when it is implemented? |
timneutkens
added
area: app
|
@timneutkens done! Was just trying to lessen your backlog by if just by a tiny amount :) |
|
@acdlite sorry dumb typo on my part. I of course meant to say
so wait - you said you're working on a fix for this? So, pending your fix, will |
|
@acdlite ohhh - re-reading your comment for the third time, it looks like you want Promises to be valid React nodes, so my particular use of |
I thought it was something with my setup at first and spent a lot of time debugging it. Have you found a way around this? Seems like the promise gets resolved, network inspector shows that the results come through and the |
|
@KSubedi did you read the thread? |
|
Hi @KSubedi regarding EDIT: also make sure you are on |
Yeah. I think we'll still throw an error when we detect this (with a helpful message) but there's no reason it should cause an out-of-memory exception. I'll update the original comment to clarify. |
|
@acdlite thanks for clarifying! |
Thank you so much, wrapping it in |
Verify canary release
Provide environment information
---->npx --no-install next info
What browser are you using? (if relevant)
Chrome
How are you deploying your application? (if relevant)
n/a
Describe the Bug
I have a pretty rudimentary RSC demo coded up here:
https://github.com/arackaf/next-13-data-fetching-blog-post/blob/feature/use-bug-repro/app/Todos.tsx
When I unwrap the promise in the component using the data using
usethen Node freezes up. I see about 15+ Node tasks in activity monitor, with one of them at about 150%. Using await works fine.Eventually, after killing the Next watch, I get this
Expected Behavior
Use should work the same as await
Link to reproduction
https://github.com/arackaf/next-13-data-fetching-blog-post/blob/feature/use-bug-repro/app/Todos.tsx
To Reproduce
Clone that repo at that branch, and run. Swap the
usecalls out for the commented out await calls (after clearing the rogue Node processes) to see it work.The text was updated successfully, but these errors were encountered: