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.

[ShravanSunder]

I 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

[ShravanSunder]

it seems that if i make the above code into a epic like hook, the problem isn't present. @crimx would you be willing to explain why this is the case if you know the reason? thanks 🙏🏾

 const [data] = useObservableState( () =>
      props.period.subject$.pipe(
         map((period) => ({
            primary: formatAggregationPeriodForDisplay(intl, period)
         }))
      )
   );

[crimx]

See here.

React function components will be called many times during its life cycle. Create or transform Observables with useObservable so that the operations will not be repeatedly performed.

[crimx]

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.

[ShravanSunder]

Thank you! Makes sense!

[ShravanSunder]

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.

Maybe this should be in the q&a @crimx

[kilbot]

If you don't wrap observable creation or operations in a function then every time the component re-renders

@crimx why don't you do this internally in useObservableState? It seems entirely random when wrapping an observable is necessary.

[kilbot]

Sorry, I didn't explain myself properly. Is there a way to check if the observable is a getter and wrap it automatically?

I guess I'm just confused, I use the same pattern in dozens of components const value = useObservableState(doc.property$, doc.property);, today is the first time I have encountered this Maximum update depth exceeded issue.

Do I need to go back and wrap all the previous observables?

[kilbot]

Sorry, this does seem to be an issue with RxDB. The Maximum update depth exceeded only appears for nested properties which is why it seemed 'random' to me.

[crimx]

Is there a way to check if the observable is a getter and wrap it automatically?

useObservableState accepts an Observable. The getter is on doc which is outside of observable-hooks so not possible to implement such feature.

[crimx]

Sorry, this does seem to be an issue with RxDB. The Maximum update depth exceeded only appears for nested properties which is why it seemed 'random' to me.

Very likely it's a bug of RxDB. I guess it used some sort of map operator to generate the nested Observable. That might explain why it's a new object every time.

[kilbot]

Just to follow up for anyone else getting this error. The problem was due to doc.property and doc.property$ emitting an object which failed the Object.is comparison, this triggered the infinite loop.