Skip to content

Infinite callback loop in navbar.tsx in useLayoutEffect #39

Open
Open
Infinite callback loop in navbar.tsx in useLayoutEffect#39
Labels
bugSomething isn't working

Description

@gpalsingh
gpalsingh
opened on Aug 9, 2019

react-dom.development.js:57 Uncaught (in promise) Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at invariant (http://localhost:3000/static/js/1.chunk.js:12202:19)
at scheduleWork (http://localhost:3000/static/js/1.chunk.js:33066:9)
at captureCommitPhaseError (http://localhost:3000/static/js/1.chunk.js:32772:9)
at commitRoot (http://localhost:3000/static/js/1.chunk.js:31977:11)
at http://localhost:3000/static/js/1.chunk.js:33591:9
at Object.unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:56239:16)
at completeRoot (http://localhost:3000/static/js/1.chunk.js:33590:17)
at performWorkOnRoot (http://localhost:3000/static/js/1.chunk.js:33513:13)
at performWork (http://localhost:3000/static/js/1.chunk.js:33418:11)
at performSyncWork (http://localhost:3000/static/js/1.chunk.js:33392:7)
at requestWork (http://localhost:3000/static/js/1.chunk.js:33247:9)
at scheduleWork (http://localhost:3000/static/js/1.chunk.js:33060:9)
at dispatchAction (http://localhost:3000/static/js/1.chunk.js:26264:9)
at resetSwState (http://localhost:3000/static/js/main.chunk.js:246:7)
at _callee$ (http://localhost:3000/static/js/main.chunk.js:281:17)
at tryCatch (http://localhost:3000/static/js/1.chunk.js:54788:17)
at Generator.invoke [as _invoke] (http://localhost:3000/static/js/1.chunk.js:55007:22)
at Generator.prototype. [as next] (http://localhost:3000/static/js/1.chunk.js:54841:21)
at asyncGeneratorStep (http://localhost:3000/static/js/1.chunk.js:541:24)
at _next (http://localhost:3000/static/js/1.chunk.js:563:9)
invariant @ react-dom.development.js:57
scheduleWork @ react-dom.development.js:20921
captureCommitPhaseError @ react-dom.development.js:20627
commitRoot @ react-dom.development.js:19832
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:91
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:91
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:90
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:91
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:90
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:90
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:90
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:91
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:90
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:91
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:90
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:91
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
dispatchAction @ react-dom.development.js:14119
resetSwState @ navbar.tsx:91
_callee$ @ navbar.tsx:101
tryCatch @ runtime.js:45
invoke @ runtime.js:264
prototype. @ runtime.js:98
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_checkSw @ navbar.tsx:88
checkSw @ navbar.tsx:88
(anonymous) @ navbar.tsx:120
commitHookEffectList @ react-dom.development.js:18059
commitLifeCycles @ react-dom.development.js:18095
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
interactiveUpdates$1 @ react-dom.development.js:21532
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions