Hello everyone.
For a long time I can’t understand the reasons for this behavior.
And what to do about it.
Example (R3F + Typescript + Mobx)
https://codesandbox.io/p/sandbox/y9f4q8
There is a button “Add model” on the scene.
Every time we click on this button, then data (position and ID) is added to the store.
React renders all these elements, adding the model via cloning.
The useGLTF hook is used.
When rendering is complete (useEffect), I get the object’s UUID and add it to the store for the specified Item.
The whole problem occurs when deleting.
I click on the object, DragControls appears, and the UUID of this object is sent to the Selected Items array.
And I click Del on the keyboard.
All Selected Items finding in the Items array in the store, and next being removed.
Accordingly, React performs re-rendering.
Removed objects are unmounted from the scene.
In theory, everything is beautiful.
But in practice, it does not work unless you remove objects in reverse order.
That is, we add 1,2,3,4.
If we remove 4,3,2,1, then everything works.
But if you start removing not from the last (4), then the UUID of the removed from the scene is assigned to the very last one.
Probably I explained it unclearly, but I really hope that professionals will understand when they see the code.
What am I doing wrong?
P.S. In general, this code is supposed to solve the problem of adding and deleting the necessary objects by a button. The objects can be different. Maybe I chose the wrong approach with uuid