Skip to content

use of use() hook causes component to hang #2953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
arackaf opened this issue Dec 8, 2024 · 0 comments · Fixed by #2963
Closed

use of use() hook causes component to hang #2953

arackaf opened this issue Dec 8, 2024 · 0 comments · Fixed by #2963
Labels
react-19

Comments

@arackaf
Copy link
Contributor

arackaf commented Dec 8, 2024

Which project does this relate to?

Start

Describe the bug

Using use() causes the component to hang, and never resolve the suspense boundary

Your Example Website or App

https://github.com/arackaf/tanstack-start-test-1/tree/feature/broken-use-repro

Steps to Reproduce the Bug or Issue

Clone the repo above - note the branch! -- feature/broken-use-repro
npm i
Run TWO terminals. Do npm run server in one. Run npm run dev in the othder
hit http://localhost:3000/app/tasks

Navigating there as a client navigation runs fine. But refresh the page on that url. The outer page should render, but the suspense boundary should show indefinitely

Image

Expected behavior

See above

Screenshots or Videos

No response

Platform

n/a

Additional context

No response
schiller-manuel added a commit that referenced this issue Dec 9, 2024
@schiller-manuel
fix(start): fix usage of use() with React 19
3b16fb1 
both router and react 19 were modifying the Promise object in a similar manner which caused a conflict.

See https://github.com/facebook/react/blob/v19.0.0/packages/react-reconciler/src/ReactFiberThenable.js#L162-L228 for how React 19 modifies the Promise object.

Both used an additional `status` property to track the Promise status, but router was using the value "success" and React was using the value "fulfilled" to mark a fulfilled Promise.

This change stores the router specific Promise tracking values using a symbol to avoid any potential collision.

fixes #2953
@schiller-manuel schiller-manuel mentioned this issue Dec 9, 2024
Merged
schiller-manuel added a commit that referenced this issue Dec 9, 2024
@schiller-manuel
fix(start): fix usage of use() with React 19 (#2963)
54dad5f 
both router and react 19 were modifying the Promise object in a similar manner which caused a conflict.

See https://github.com/facebook/react/blob/v19.0.0/packages/react-reconciler/src/ReactFiberThenable.js#L162-L228 for how React 19 modifies the Promise object.

Both used an additional `status` property to track the Promise status, but router was using the value "success" and React was using the value "fulfilled" to mark a fulfilled Promise.

This change stores the router specific Promise tracking values using a symbol to avoid any potential collision.

fixes #2953
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
react-19
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(start): fix usage of use() with React 19 TanStack/router
2 participants
@schiller-manuel @arackaf