Skip to content
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

(react) - Cannot update a component in a different one #2773

Closed
3 tasks done
villesau opened this issue Oct 30, 2022 · 2 comments
Closed
3 tasks done

(react) - Cannot update a component in a different one #2773

villesau opened this issue Oct 30, 2022 · 2 comments
Labels
needs more info ✋ A question or report that needs more info to be addressable won't fix 🛑 This issue won't be fixed as part of the current roadmap

Comments

@villesau
Copy link
Contributor

villesau commented Oct 30, 2022 •
edited
Loading

Describe the bug

We see following stack traces. Based on the instructions here: facebook/react#18178 (comment) the root cause lies somewhere in Urql. We get this in couple of our components, but not in all of them. Both components in question, MyComponentOne & MyComponentTwo makes a simple urql queries (not the same query).

react_devtools_backend.js:4026 Warning: Cannot update a component (`MyComponentTwo`) while rendering a different component (`MyComponentOne`). To locate the bad setState() call inside `MyComponentOne`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at MyComponentOne (webpack-internal:///./src/components/my-components/MyComponentOne/MyComponentOne.tsx:43:3)
    at div
    at div
    at MyComponentThree (webpack-internal:///./src/containers/my-components/MyComponentThree.tsx:99:11)
    at MyComponentTwo (webpack-internal:///./src/containers/my-components/MyComponentTwo.tsx:27:77)
    at RenderedRoute (webpack-internal:///./node_modules/react-router/dist/index.js:735:5)
    at Routes (webpack-internal:///./node_modules/react-router/dist/index.js:1182:5)
    at Routes (webpack-internal:///./src/containers/apps/Routes.tsx:157:86)
    at div
    at MainApp (webpack-internal:///./src/containers/apps/MainApp.tsx:66:86)
    at Router (webpack-internal:///./node_modules/react-router/dist/index.js:1114:15)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/dist/index.js:297:5)
    at SomeComponent (webpack-internal:///./src/components/some-components/SomeComponent.tsx:10:3)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:15:3)
    at Client (webpack-internal:///./src/client.tsx:66:5)
    at ErrorBoundary (webpack-internal:///./node_modules/@bugsnag/plugin-react/dist/bugsnag-react.js:70:32)
overrideMethod	@	react_devtools_backend.js:4026
printWarning	@	react-dom.development.js?61bb:67
error	@	react-dom.development.js?61bb:43
warnAboutRenderPhaseUpdatesInDEV	@	react-dom.development.js?61bb:24002
scheduleUpdateOnFiber	@	react-dom.development.js?61bb:21836
dispatchAction	@	react-dom.development.js?61bb:16139
updateResult	@	urql.es.js?d832:205
eval	@	wonka.mjs?11ff:1058
eval	@	wonka.mjs?11ff:293
next	@	wonka.mjs?be50:964
eval	@	wonka.mjs?be50:1058
eval	@	wonka.mjs?be50:293
eval	@	wonka.mjs?be50:330
eval	@	wonka.mjs?be50:420
eval	@	wonka.mjs?be50:293
eval	@	wonka.mjs?be50:316
eval	@	wonka.mjs?be50:585
eval	@	wonka.mjs?be50:229
eval	@	wonka.mjs?be50:951
eval	@	wonka.mjs?be50:227
eval	@	wonka.mjs?be50:946
applyInnerSource	@	wonka.mjs?be50:209
eval	@	wonka.mjs?be50:233
eval	@	wonka.mjs?be50:923
eval	@	wonka.mjs?be50:253
eval	@	wonka.mjs?be50:583
eval	@	wonka.mjs?be50:240
applyInnerSource	@	wonka.mjs?be50:572
eval	@	wonka.mjs?be50:593
eval	@	wonka.mjs?be50:710
eval	@	wonka.mjs?be50:175
eval	@	wonka.mjs?be50:420
eval	@	wonka.mjs?5031:200
eval	@	wonka.mjs?be50:316
eval	@	wonka.mjs?be50:316
eval	@	wonka.mjs?fd3b:229
eval	@	wonka.mjs?fd3b:186
eval	@	wonka.mjs?fd3b:175
eval	@	wonka.mjs?fd3b:420
eval	@	wonka.mjs?fd3b:186
eval	@	wonka.mjs?fd3b:175
eval	@	wonka.mjs?fd3b:420
eval	@	wonka.mjs?be50:175
eval	@	wonka.mjs?5031:200
eval	@	wonka.mjs?be50:420
next	@	wonka.mjs?be50:964
next	@	wonka.mjs?be50:994
dispatchOperation	@	urql-core.mjs?8acf:566
eval	@	urql-core.mjs?8acf:647
eval	@	wonka.mjs?be50:328
eval	@	wonka.mjs?be50:425
eval	@	wonka.mjs?be50:323
eval	@	wonka.mjs?be50:276
eval	@	wonka.mjs?be50:1052
eval	@	urql-core.mjs?8acf:639
eval	@	wonka.mjs?be50:961
eval	@	wonka.mjs?11ff:729
eval	@	wonka.mjs?11ff:1052
eval	@	urql.es.js?d832:176
eval	@	urql.es.js?d832:194
mountState	@	react-dom.development.js?61bb:15626
useState	@	react-dom.development.js?61bb:16248
useState	@	react.development.js?72d0:1508
useQuery	@	urql.es.js?d832:194
useMyComponentOneQuery	@	MyComponentOne.generated.ts?390b:24
MyComponentOne	@	MyComponentOne.tsx?0857:40
renderWithHooks	@	react-dom.development.js?61bb:14985
mountIndeterminateComponent	@	react-dom.development.js?61bb:17811
beginWork	@	react-dom.development.js?61bb:19049
beginWork$1	@	react-dom.development.js?61bb:23940
performUnitOfWork	@	react-dom.development.js?61bb:22776
workLoopSync	@	react-dom.development.js?61bb:22707
renderRootSync	@	react-dom.development.js?61bb:22670
performSyncWorkOnRoot	@	react-dom.development.js?61bb:22293
eval	@	react-dom.development.js?61bb:11327
unstable_runWithPriority	@	scheduler.development.js?3069:468
runWithPriority$1	@	react-dom.development.js?61bb:11276
flushSyncCallbackQueueImpl	@	react-dom.development.js?61bb:11322
flushSyncCallbackQueue	@	react-dom.development.js?61bb:11309
scheduleUpdateOnFiber	@	react-dom.development.js?61bb:21893
dispatchAction	@	react-dom.development.js?61bb:16139
updateResult	@	urql.es.js?d832:205
eval	@	wonka.mjs?11ff:1058
eval	@	wonka.mjs?11ff:293
next	@	wonka.mjs?be50:964
eval	@	wonka.mjs?be50:1058
eval	@	wonka.mjs?be50:293
eval	@	wonka.mjs?be50:330
eval	@	wonka.mjs?be50:420
eval	@	wonka.mjs?be50:293
eval	@	wonka.mjs?be50:316
eval	@	wonka.mjs?be50:585
eval	@	wonka.mjs?be50:229
eval	@	wonka.mjs?be50:951
eval	@	wonka.mjs?be50:227
eval	@	wonka.mjs?be50:946
applyInnerSource	@	wonka.mjs?be50:209
eval	@	wonka.mjs?be50:233
eval	@	wonka.mjs?be50:923
eval	@	wonka.mjs?be50:253
eval	@	wonka.mjs?be50:583
eval	@	wonka.mjs?be50:240
applyInnerSource	@	wonka.mjs?be50:572
eval	@	wonka.mjs?be50:593
eval	@	wonka.mjs?be50:710
eval	@	wonka.mjs?be50:175
eval	@	wonka.mjs?be50:420
eval	@	wonka.mjs?5031:200
eval	@	wonka.mjs?be50:316
eval	@	wonka.mjs?be50:316
eval	@	wonka.mjs?fd3b:229
eval	@	wonka.mjs?fd3b:186
eval	@	wonka.mjs?fd3b:175
eval	@	wonka.mjs?fd3b:420
eval	@	wonka.mjs?be50:229
eval	@	wonka.mjs?be50:229
eval	@	wonka.mjs?be50:316
eval	@	wonka.mjs?be50:710
next	@	wonka.mjs?be50:964
eval	@	71ff986c.mjs?5dd6:319
Promise.then (async)		
executeIncrementalFetch	@	71ff986c.mjs?5dd6:318
eval	@	71ff986c.mjs?5dd6:404
Promise.then (async)		
eval	@	71ff986c.mjs?5dd6:399
eval	@	wonka.mjs?be50:961
eval	@	wonka.mjs?be50:693
eval	@	wonka.mjs?be50:302
applyInnerSource	@	wonka.mjs?be50:209
eval	@	wonka.mjs?be50:233
eval	@	wonka.mjs?be50:175
eval	@	wonka.mjs?be50:420
eval	@	wonka.mjs?fd3b:186
eval	@	wonka.mjs?fd3b:229
eval	@	wonka.mjs?fd3b:186
eval	@	wonka.mjs?fd3b:175
eval	@	wonka.mjs?fd3b:420
eval	@	wonka.mjs?fd3b:186
eval	@	wonka.mjs?fd3b:175
eval	@	wonka.mjs?fd3b:420
eval	@	wonka.mjs?be50:175
eval	@	wonka.mjs?5031:200
eval	@	wonka.mjs?be50:420
next	@	wonka.mjs?be50:964
next	@	wonka.mjs?be50:994
dispatchOperation	@	urql-core.mjs?8acf:561
eval	@	urql-core.mjs?8acf:647
eval	@	wonka.mjs?be50:328
eval	@	wonka.mjs?be50:425
eval	@	wonka.mjs?be50:323
eval	@	wonka.mjs?be50:276
eval	@	wonka.mjs?be50:1052
eval	@	urql-core.mjs?8acf:639
eval	@	wonka.mjs?be50:961
eval	@	wonka.mjs?11ff:276
eval	@	wonka.mjs?11ff:1052
eval	@	urql.es.js?d832:211
invokePassiveEffectCreate	@	react-dom.development.js?61bb:23487
callCallback	@	react-dom.development.js?61bb:3945
__trace__	@	bugsnag.js?012c:2795
invokeGuardedCallbackDev	@	react-dom.development.js?61bb:3994
invokeGuardedCallback	@	react-dom.development.js?61bb:4056
flushPassiveEffectsImpl	@	react-dom.development.js?61bb:23574
unstable_runWithPriority	@	scheduler.development.js?3069:468
runWithPriority$1	@	react-dom.development.js?61bb:11276
flushPassiveEffects	@	react-dom.development.js?61bb:23447
eval	@	react-dom.development.js?61bb:23324
workLoop	@	scheduler.development.js?3069:417
flushWork	@	scheduler.development.js?3069:390
performWorkUntilDeadline	@	scheduler.development.js?3069:157

Reproduction

Unfortunately none, but I hope the stack trace is able to point to correct direction

Urql version

3.0.3

React version

17.0.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

E: Looks like this or similar case has already been aknowledged by urql team: facebook/react#18178 (comment) :)
@kitten
Copy link
Member

kitten commented Oct 30, 2022

There's not much we can do without a reproduction and details, especially since a recent-ish patch already resolved one of the legitimate causes for the issue already.
See: #2556

So, as far as this goes, a stack trace isn't sufficient for us to look into this, especially if it involves React Devtools and potentially HMR.

For what it's worth, I've never seen this warning cause actual issues or bugs, while our mitigation of the warning unfortunately used to cause bugs. That said, I'm pretty convinced that any case that'd actually cause issues has been resolved 🤔

As for common causes, if you have multiple queries in adjacent components, it's preferable to unify and compose the same query of multiple fragments and instead passing on the data. Alternatively, if you're triggering a mutation inside a render call this can also trigger this warning

For now, I'll mark this issue as incomplete, since we wouldn't have enough info to go after anything, but even with more info it's a warning that's safe to ignore afaik

@kitten kitten added needs more info ✋ A question or report that needs more info to be addressable won't fix 🛑 This issue won't be fixed as part of the current roadmap labels Oct 30, 2022
@kitten kitten changed the title Weird setState errors from urql (react) - Cannot update a component in a different one Oct 30, 2022
@kitten
Copy link
Member

kitten commented Jan 10, 2023

Closing for now, since as stated, we currently, while we have heard of this specifically from RN users, have no idea when it's now triggered, since prior changes in react-urql and core have circumvented and fixed the common failure case, and we have no reproduction that shows an actual issue beyond a warning when this happens.

@kitten kitten closed this as not planned Won't fix, can't repro, duplicate, stale Jan 10, 2023
@kitten kitten mentioned this issue Jan 31, 2023
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs more info ✋ A question or report that needs more info to be addressable won't fix 🛑 This issue won't be fixed as part of the current roadmap
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kitten @villesau