Skip to content
This repository has been archived by the owner on Dec 31, 2020. It is now read-only.

Cannot update a component from inside the function body of a different component #264

Closed
barbalex opened this issue Mar 13, 2020 · 2 comments
Closed

Cannot update a component from inside the function body of a different component #264

barbalex opened this issue Mar 13, 2020 · 2 comments
Labels
bug Something isn't working

Comments

@barbalex
Copy link
Contributor

Intended outcome

I have a bunch of apps using mobx, mobx-react-lite and mobx-state-tree that before react 16.13.0 worked fine.

Actual outcome

After updating to react 16.13.0 they all throw many warnings similar to:

index.js:2177 Warning: Cannot update a component from inside the function body of a different component.
    in TreeContainer (at Vermehrung.js:143)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Vermehrung__StyledSplitPane)
    in Vermehrung__StyledSplitPane (at Vermehrung.js:137)
    in div (created by Vermehrung__Container)
    in Vermehrung__Container (at Vermehrung.js:136)
    in Layout (at Vermehrung.js:135)
    in ErrorBoundary (at Vermehrung.js:134)
    in Vermehrung (created by HotExportedVermehrung)
    in AppContainer (created by HotExportedVermehrung)
    in HotExportedVermehrung (created by PageRenderer)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:131)
    in SnackbarProvider (at App.js:114)
    in ApolloProvider (at App.js:113)
    in ThemeProvider (at App.js:111)
    in App (at gatsby-browser.js:15)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:67)
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ react_devtools_backend.js:6
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:23260
scheduleUpdateOnFiber @ react-dom.development.js:21196
dispatchAction @ react-dom.development.js:15682
(anonymous) @ index.module.js:140
(anonymous) @ index.module.js:164
./node_modules/mobx/lib/mobx.module.js.Reaction.runReaction @ mobx.module.js:1761
runReactionsHelper @ mobx.module.js:1898
reactionScheduler @ mobx.module.js:1876
runReactions @ mobx.module.js:1881
endBatch @ mobx.module.js:1581
./node_modules/mobx/lib/mobx.module.js.Reaction.track @ mobx.module.js:1809
useObserver @ index.module.js:182
TreeContainer @ index.module.js:206
_default @ react-hot-loader.development.js:827
renderWithHooks @ react-dom.development.js:14825
updateFunctionComponent @ react-dom.development.js:17058
updateSimpleMemoComponent @ react-dom.development.js:16996
beginWork @ react-dom.development.js:18720
beginWork$1 @ react-dom.development.js:23210
performUnitOfWork @ react-dom.development.js:22185
workLoopSync @ react-dom.development.js:22161
performSyncWorkOnRoot @ react-dom.development.js:21787
(anonymous) @ react-dom.development.js:11111
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11061
flushSyncCallbackQueueImpl @ react-dom.development.js:11106
flushSyncCallbackQueue @ react-dom.development.js:11094
scheduleUpdateOnFiber @ react-dom.development.js:21230
dispatchAction @ react-dom.development.js:15682
next @ react-hooks.esm.js:232
notifySubscription @ Observable.js:135
onNotify @ Observable.js:179
next @ Observable.js:235
(anonymous) @ bundle.esm.js:435
iterateObserversSafely @ bundle.esm.js:435
next @ bundle.esm.js:410
invoke @ bundle.esm.js:1209
(anonymous) @ bundle.esm.js:1294
(anonymous) @ bundle.esm.js:1559
(anonymous) @ bundle.esm.js:1557
./node_modules/apollo-client/bundle.esm.js.QueryManager.broadcastQueries @ bundle.esm.js:1555
(anonymous) @ bundle.esm.js:1646
next @ Observable.js:322
notifySubscription @ Observable.js:135
onNotify @ Observable.js:179
next @ Observable.js:235
(anonymous) @ bundle.esm.js:866
next @ bundle.esm.js:866
notifySubscription @ Observable.js:135
onNotify @ Observable.js:179
next @ Observable.js:235
notifySubscription @ Observable.js:135
onNotify @ Observable.js:179
next @ Observable.js:235
(anonymous) @ bundle.esm.js:76
Promise.then (async)
(anonymous) @ bundle.esm.js:75
Subscription @ Observable.js:197
subscribe @ Observable.js:279
(anonymous) @ bundle.esm.js:13
Promise.then (async)
(anonymous) @ bundle.esm.js:12
Subscription @ Observable.js:197
subscribe @ Observable.js:279
(anonymous) @ bundle.esm.js:864
Subscription @ Observable.js:197
subscribe @ Observable.js:279
./node_modules/apollo-client/bundle.esm.js.QueryManager.getObservableFromLink @ bundle.esm.js:1595
(anonymous) @ bundle.esm.js:1630
./node_modules/apollo-client/bundle.esm.js.QueryManager.fetchRequest @ bundle.esm.js:1629
(anonymous) @ bundle.esm.js:1146
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
./node_modules/apollo-client/bundle.esm.js.QueryManager.fetchQuery @ bundle.esm.js:1092
./node_modules/apollo-client/bundle.esm.js.ObservableQuery.setVariables @ bundle.esm.js:320
./node_modules/apollo-client/bundle.esm.js.ObservableQuery.setOptions @ bundle.esm.js:302
./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.updateObservableQuery @ react-hooks.esm.js:213
./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.execute @ react-hooks.esm.js:103
(anonymous) @ react-hooks.esm.js:380
useDeepMemo @ react-hooks.esm.js:354
useBaseQuery @ react-hooks.esm.js:380
useQuery @ react-hooks.esm.js:397
TreeContainer @ index.js:46
(anonymous) @ index.module.js:206
(anonymous) @ index.module.js:184
trackDerivedFunction @ mobx.module.js:761
./node_modules/mobx/lib/mobx.module.js.Reaction.track @ mobx.module.js:1795
useObserver @ index.module.js:182
TreeContainer @ index.module.js:206
_default @ react-hot-loader.development.js:827
renderWithHooks @ react-dom.development.js:14825
updateFunctionComponent @ react-dom.development.js:17058
updateSimpleMemoComponent @ react-dom.development.js:16996
beginWork @ react-dom.development.js:18720
beginWork$1 @ react-dom.development.js:23210
performUnitOfWork @ react-dom.development.js:22185
workLoopSync @ react-dom.development.js:22161
performSyncWorkOnRoot @ react-dom.development.js:21787
(anonymous) @ react-dom.development.js:11111
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11061
flushSyncCallbackQueueImpl @ react-dom.development.js:11106
flushSyncCallbackQueue @ react-dom.development.js:11094
scheduleUpdateOnFiber @ react-dom.development.js:21230
dispatchAction @ react-dom.development.js:15682
next @ react-hooks.esm.js:232
notifySubscription @ Observable.js:135
onNotify @ Observable.js:179
next @ Observable.js:235
(anonymous) @ bundle.esm.js:435
iterateObserversSafely @ bundle.esm.js:435
next @ bundle.esm.js:410
invoke @ bundle.esm.js:1209
(anonymous) @ bundle.esm.js:1294
(anonymous) @ bundle.esm.js:1559
(anonymous) @ bundle.esm.js:1557
./node_modules/apollo-client/bundle.esm.js.QueryManager.broadcastQueries @ bundle.esm.js:1555
(anonymous) @ bundle.esm.js:1646
next @ Observable.js:322
notifySubscription @ Observable.js:135
onNotify @ Observable.js:179
next @ Observable.js:235
(anonymous) @ bundle.esm.js:866
next @ bundle.esm.js:866
notifySubscription @ Observable.js:135
onNotify @ Observable.js:179
next @ Observable.js:235
notifySubscription @ Observable.js:135
onNotify @ Observable.js:179
next @ Observable.js:235
(anonymous) @ bundle.esm.js:76
Promise.then (async)
(anonymous) @ bundle.esm.js:75
Subscription @ Observable.js:197
subscribe @ Observable.js:279
(anonymous) @ bundle.esm.js:13
Promise.then (async)
(anonymous) @ bundle.esm.js:12
Subscription @ Observable.js:197
subscribe @ Observable.js:279
(anonymous) @ bundle.esm.js:864
Subscription @ Observable.js:197
subscribe @ Observable.js:279
./node_modules/apollo-client/bundle.esm.js.QueryManager.getObservableFromLink @ bundle.esm.js:1595
(anonymous) @ bundle.esm.js:1630
./node_modules/apollo-client/bundle.esm.js.QueryManager.fetchRequest @ bundle.esm.js:1629
(anonymous) @ bundle.esm.js:1146
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
./node_modules/apollo-client/bundle.esm.js.QueryManager.fetchQuery @ bundle.esm.js:1092
./node_modules/apollo-client/bundle.esm.js.QueryManager.observeQuery @ bundle.esm.js:1460
./node_modules/apollo-client/bundle.esm.js.ObservableQuery.setUpQuery @ bundle.esm.js:388
./node_modules/apollo-client/bundle.esm.js.ObservableQuery.onSubscribe @ bundle.esm.js:366
(anonymous) @ bundle.esm.js:96
Subscription @ Observable.js:197
subscribe @ Observable.js:279
./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.startQuerySubscription @ react-hooks.esm.js:222
QueryData._this.getExecuteResult @ react-hooks.esm.js:74
./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.execute @ react-hooks.esm.js:106
(anonymous) @ react-hooks.esm.js:380
useDeepMemo @ react-hooks.esm.js:354
useBaseQuery @ react-hooks.esm.js:380
useQuery @ react-hooks.esm.js:397
TreeContainer @ index.js:52
(anonymous) @ index.module.js:206
(anonymous) @ index.module.js:184
trackDerivedFunction @ mobx.module.js:761
./node_modules/mobx/lib/mobx.module.js.Reaction.track @ mobx.module.js:1795
useObserver @ index.module.js:182
TreeContainer @ index.module.js:206
_default @ react-hot-loader.development.js:827
renderWithHooks @ react-dom.development.js:14825
updateFunctionComponent @ react-dom.development.js:17058
updateSimpleMemoComponent @ react-dom.development.js:16996
updateMemoComponent @ react-dom.development.js:16885
beginWork @ react-dom.development.js:18715
beginWork$1 @ react-dom.development.js:23210
performUnitOfWork @ react-dom.development.js:22185
workLoopSync @ react-dom.development.js:22161
performSyncWorkOnRoot @ react-dom.development.js:21787
(anonymous) @ react-dom.development.js:11111
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11061
flushSyncCallbackQueueImpl @ react-dom.development.js:11106
flushSyncCallbackQueue @ react-dom.development.js:11094
scheduleUpdateOnFiber @ react-dom.development.js:21230
dispatchAction @ react-dom.development.js:15682
(anonymous) @ index.module.js:140
(anonymous) @ index.module.js:164
./node_modules/mobx/lib/mobx.module.js.Reaction.runReaction @ mobx.module.js:1761
runReactionsHelper @ mobx.module.js:1898
reactionScheduler @ mobx.module.js:1876
runReactions @ mobx.module.js:1881
endBatch @ mobx.module.js:1581
_endAction @ mobx.module.js:967
executeAction @ mobx.module.js:921
bound setFirebase @ mobx.module.js:901
runMiddleWares @ mobx-state-tree.module.js:2562
runWithActionContext @ mobx-state-tree.module.js:2425
res @ mobx-state-tree.module.js:2452
_callee$ @ setHasuraClaims.js:39
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_default @ setHasuraClaims.js:4
_callee$ @ App.js:86
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
(anonymous) @ App.js:83
(anonymous) @ index.cjs.js:1226
(anonymous) @ index.cjs.js:1336
Promise.then (async)
push../node_modules/@firebase/util/dist/index.cjs.js.ObserverProxy.sendOne @ index.cjs.js:1333
push../node_modules/@firebase/util/dist/index.cjs.js.ObserverProxy.forEachObserver @ index.cjs.js:1323
push../node_modules/@firebase/util/dist/index.cjs.js.ObserverProxy.next @ index.cjs.js:1225
(anonymous) @ auth.esm.js:373
(anonymous) @ auth.esm.js:377
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:278
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:278
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:277
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:277
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
(anonymous) @ auth.esm.js:229
(anonymous) @ auth.esm.js:225
zd @ auth.esm.js:88
push../node_modules/@firebase/auth/dist/auth.esm.js.G.dispatchEvent @ auth.esm.js:86
hi @ auth.esm.js:208
push../node_modules/@firebase/auth/dist/auth.esm.js.k.Hc @ auth.esm.js:206
push../node_modules/@firebase/auth/dist/auth.esm.js.k.Sb @ auth.esm.js:206
XMLHttpRequest.send (async)
(anonymous) @ VM7729:1
ai @ auth.esm.js:204
push../node_modules/@firebase/auth/dist/auth.esm.js.Ei.w @ auth.esm.js:225
Mi @ auth.esm.js:223
(anonymous) @ auth.esm.js:229
D @ auth.esm.js:69
Si @ auth.esm.js:229
(anonymous) @ auth.esm.js:246
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:278
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:278
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:278
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:278
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:278
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:277
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
a.onsuccess @ auth.esm.js:276
IndexedDB (async)
(anonymous) @ auth.esm.js:277
e.g @ auth.esm.js:73
Nc @ auth.esm.js:76
Jc @ auth.esm.js:76
push../node_modules/@firebase/auth/dist/auth.esm.js.k.ec @ auth.esm.js:75
sc @ auth.esm.js:69
Promise.then (async)
pc @ auth.esm.js:69
oc @ auth.esm.js:69
Kc @ auth.esm.js:75
uc @ auth.esm.js:74
(anonymous) @ auth.esm.js:69
d.onsuccess @ auth.esm.js:275
Show 172 more frames

Maybe the image is better to spot it:
2020-03-14_00h29_14

According to facebook/react#18178 (comment) the error comes from https://github.com/mobxjs/mobx-react-lite/blob/master/src/utils.ts#L9-L17:

function useForceUpdate() {
    var _a = __read(useState(0), 2), setTick = _a[1];
    var update = useCallback(function () {
        setTick(function (tick) { return tick + 1; });
    }, []);
    return update;
}

How to reproduce the issue

Can't reproduce in a simple way because these are all projects that have grown over years.

Versions

I am using:

  • "mobx": "5.15.4",
  • "mobx-react-lite": "1.5.2",
  • "mobx-state-tree": "3.15.0",

Sorry I can't be more specific. Maybe that would be possible, if this issue occurred while developing a new project.
@barbalex barbalex added the bug Something isn't working label Mar 13, 2020
@danielkcz
Copy link
Collaborator

danielkcz commented Mar 14, 2020 •
edited

We don't want your project code, that wouldn't be helpful. Seeing TreeContainer in your stack trace, try to take that one (or any other), strip it down to an absolute minimum and attempt to make a tiny reproduction, please.

My bet is that you are doing something that seems to work, but might cause an issue in the future React. I am fairly convinced you will have to fix that flawed pattern on your side.

Possible duplicate: mobxjs/mobx-react#846

@barbalex
Copy link
Contributor Author

Following your advice I managed to isolate the bug to two store updates that it seems react saw as side effects. I moved them into useEffect which solved the issue.

Sorry for bugging you and thanks for helping!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@barbalex @danielkcz