Skip to content

React 19 Cannot update a component (Component) while rendering a different component #3764

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.

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

Open
3 tasks done
JoaoBGusmao opened this issue Mar 17, 2025 · 4 comments · May be fixed by #3769
Open
3 tasks done

React 19 Cannot update a component (Component) while rendering a different component #3764

JoaoBGusmao opened this issue Mar 17, 2025 · 4 comments · May be fixed by #3769

Comments

@JoaoBGusmao
Copy link

JoaoBGusmao commented Mar 17, 2025

Describe the bug

Since react 19, there is an error showing up when trying to mount a component that runs a query that was already executed by another component.

I found this error while updating a website to next15. It has a page that calls a follow button that queries the followage status. The error shows up when navigating to a different page that imports the same button component.

I prepared two examples, one using nextjs, which is closer to my use case, and another one using npx create-react-router@latest.

What I found out is that the error only happens when using network-only, and when the two query invocation has the same query name. (There's an extra page on next's example that test it). On nextjs, it happens regardless using network-only or not

create-react-router example:
https://github.com/JoaoBGusmao/urql-r19-bug

nextjs example:
https://github.com/JoaoBGusmao/urql-next15-bug

Both projects, just install the dependencies and run yarn dev

Reproduction

https://github.com/JoaoBGusmao/urql-r19-bug

Urql version

urql 4.2.2

Validations

  • I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
  • Read the docs.
  • Follow our Code of Conduct
@JohnGoodgame
Copy link

@kitten any updates on this? It's quite annoying while debugging.

@kitten
Copy link
Member

kitten commented May 20, 2025

Sorry, dropped the ball here. I haven't been able to test this myself in a real app basically. If someone is willing to test this out then I'm happy to merge this of course.

However, I've delayed #3769 originally because I think the check is superfluous. It was originally kept for some kind of pre-React 18 edge case. I don't remember. But I think it's safe to now always do Promise.resolve(value).then(setState). I just haven't tested this in development yet (where the difference occurs)

@kitten
Copy link
Member

kitten commented May 20, 2025

Actually, this may also work and get rid of React internals as well. It's closer to what we used to do here, but that had different gotchas. But this preserves the synchronous nature of setState and allows for consistent batched state updates (as it was before) when possible 9dbe48c

@JohnGoodgame
Copy link

@kitten oh I thought the PR was just to hide the console errors? I've tested heavily and despite getting the errors, everything is working as expected. Is it worth just merging in that PR until you have time to work on the full solution you mentioned?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants