How to properly track array changes in MobX? And how to strictly type them?

Question

typescript

I started learning Mobx and encountered some interesting use cases and behavior along the way.
To begin with, a link to the behavior description: https://github.com/mobxjs/mobx/issues/1476
The bottom line is that an observable array makes its elements observable by default as well. And when you try (what is on the link) to search the array for the added object by reference, we will not find anything, which is logical. In this regard, the question arises - how do they live with this in large projects with an extensive code base? No matter how attentive the programmer is, but someday he will make a mistake and forget about this behavior, and a bug will arise. There is a way out in the form of permission to use only shallow arrays, but this is also not a panacea.
Actually, how do you deal with this in your projects, or what are the best practices on this subject?
And the second question, already on the architectural implementation. There is a Store, it contains an observed array. According to business logic, when you add or remove an object to it, you need to perform a side effect, for example, by adding something to another side. Objects are added/removed to the array when the button is clicked. So, you can hang on the click handler and add to the first array, and call the side effect for operations on the second one. And you can observe the change in the first array using observe(listener) which looks more MobX-way.
Here I would like to clarify which architecture to choose for the described use case, and how to work with the typescript array observer.

Answer 1

The answer to the first question: search is not by reference, but by object identifier. .find() and unique id