Mobx-state-tree: error when react-devtools is opened and an app has a lot of updates

[alexolefirenko]

Hello I have a project that uses mobx-state-tree as a main state management and everything was ok until I opened react-devtool and saw a lot of errors related to mobx-state-tree... that I use an object that has already died and not a part of mobx-state-tree

So, I was trying for couple hours to understand why it happens and made a some example that can reproduce my trouble.

In sandbox:
I used setInterval to update an array with data and when array has more than 10 rows cut the rest.
https://codesandbox.io/s/n061263m1j

In real project:
I need it because I have list of events that updates 2-3 times per second via WebSocket connection and receives parts to update an array and after each update and have to check if array more than 50 and cut the rest.

Does someone have any idea why is it happens? I thought that an instance of mobx-state-tree passes to react-devtools and it tries to read some property that causes an error...
Or maybe and shoud not use react-devtools at all? 😒

[xaviergonz]

Hi! Is that the right code-sandbox link? It just points to the original one.

So, what you mean is that when you don't use the react dev tools middleware everything is ok but when you use it the errors start to appear?

[alexolefirenko]

@xaviergonz sorry, my bad. link fixed

[alexolefirenko]

I get these errors
mobx-state-tree.js:1275 [mobx-state-tree][error] You are trying to read or write to an object that is no longer part of a state tree. (Object type was 'ItemModel'). Either detach nodes first, or don't use objects after removing / replacing them in the tree. Use setLivelynessChecking("error") to simplify debugging this error.

[xaviergonz]

Hmm, I just added redux dev tools support to it and opened the redux dev tools and your example works for me:
https://codesandbox.io/s/2x7z62pm4y

[xaviergonz]

ah sorry, for some reason I read redux devtools, you mean react dev tools
Either way same result, it works for me (although I'd recommend you to reuse keys rather than having a new key per element to make it faster)

https://reactjs.org/docs/lists-and-keys.html#keys

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

[xaviergonz]

Ah now I see it happening, it took a really long while to appear.
Apparently the react devtools are trying to access an item that was "just" deleted for some reason in an async way. In this case it appears it is accessing all the properties inside "item" deeply, which, since it was just deleted and therefore no longer alive would show that warning.

I can think a few ways to fix this:

• pass as item a clone of the node
• instead of removing the nodes from the array detach for a bit them clean them up later
• pass the data to the items as individual properties rather than an object (they would stop being observable though, kind of)
• ignore the errors when using react-devtools?

Makes me wonder however why the react devtools might need to read the data of a deleted node though, might want to report that to the react devtools devs.