useObservableState: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
See original GitHub issueI have an observable like below. its using an observable called period (created by useObservable(new BehaviourSubject())
). I seem to get this issue, even when I’m not doing anything with the output data
.
const data = useObservableState(
props.period.subject$.pipe(
map((period) => ({
primary: formatAggregationPeriodForDisplay(intl, period)
}))
)
);
period subject isn’t used to render anything else, I’ve commented out everything…
any thoughts on ideas on this? is this a bug?
attached is the call stack
overrideMethod | @ | react_devtools_backend.js:2430
-- | -- | --
| printWarning | @ | react-dom.development.js?61bb:67
| error | @ | react-dom.development.js?61bb:43
| checkForNestedUpdates | @ | react-dom.development.js?61bb:23812
| scheduleUpdateOnFiber | @ | react-dom.development.js?61bb:21835
| dispatchAction | @ | react-dom.development.js?61bb:16139
| next | @ | use-subscription-internal.js?531a:41
| SafeSubscriber.__tryOrUnsub | @ | Subscriber.js?1453:192
| SafeSubscriber.next | @ | Subscriber.js?1453:130
| Subscriber._next | @ | Subscriber.js?1453:76
| Subscriber.next | @ | Subscriber.js?1453:53
| MapSubscriber._next | @ | map.js?ebb6:41
| Subscriber.next | @ | Subscriber.js?1453:53
| BehaviorSubject._subscribe | @ | BehaviorSubject.js?dba1:22
| Observable._trySubscribe | @ | Observable.js?e9b9:43
| Subject._trySubscribe | @ | Subject.js?2bd2:89
| Observable.subscribe | @ | Observable.js?e9b9:29
| MapOperator.call | @ | map.js?ebb6:18
| Observable.subscribe | @ | Observable.js?e9b9:24
| eval | @ | use-subscription-internal.js?531a:33
| invokePassiveEffectCreate | @ | react-dom.development.js?61bb:23487
| callCallback | @ | react-dom.development.js?61bb:3945
| 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
| Show 2 more frames
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
React warning Maximum update depth exceeded
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency ...
Read more >Fix the "Maximum Update Depth Exceeded" Error in React
One of which is when you accidentally cause an infinite loop, often resulting in the cryptic "maximum update depth exceeded" error.
Read more >Maximum update depth exceeded warning in React
This warning can often happen when a component sets the state inside the useEffect hook. The useEffect hook either does not have a ......
Read more >Maximum update depth exceeded. This can happen ... - GitHub
This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the ...
Read more >Understanding Dependencies in useEffect | Bits and Pieces
Under the Hood of React useEffect Dependencies. A deep dive into the dependencies array in React.useEffect(). There is so much confusion around the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If you don’t wrap observable creation or operations in a function then every time the component re-renders, a new observable is created and observable-hooks will switch to the new observable instead.
See here.