[mobx-react] `Maximum update depth exceeded` error since `mobx-react@8`
Author: jeffijoeCreated Apr 26, 2024Updated May 22, 2025
Labels🐛 bug
**Intended outcome:**
There should be no `Maximum update depth exceeded` error
**Actual outcome:**
React throws a `Maximum update depth exceeded` error.
**How to reproduce the issue:**
I created a [reproduction repository](https://github.com/jeffijoe/mobx-react-downshift-issue) (see `src/MobX.jsx`) - it includes both `mobx` and `downshift`, this is because `downshift` is the root cause however the way `mobx-react` behaves after version 8 (with the change to `useSyncExternalStore`) makes me believe it's worth investigating on the `mobx-react` side.
You'll be able to see for yourself by downgrading to `mobx-react@7` in that repo and running the test - it will show `2` in the counter instead of `53` (at which point the error is thrown which stops the loop).
I know the issue template states to avoid speculation but I've spent way too long investigating what's going on to not not mention it What seems to be happening is the `useSyncExternalStore` will "push" another work item on the internal React sync queue (for batching) and because every reaction will make `mobx-react`'s implementation return a new symbol in `getSnapshot`, if React triggers an effect which subsequently triggers a MobX reaction, it will keep pushing to that queue for each iteration.
https://github.com/mobxjs/mobx/blob/13a74fe43de683249b2fd17145957b78f5befee4/packages/mobx-react-lite/src/useObserver.ts#L49-L72
New work pushed to queue
Source: mobxjs/mobx