Infinite callback loop in navbar.tsx in useLayoutEffect

[gpalsingh]

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