Reduce every DOM operation to the minimum possible DOM updates

[apedroferreira]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Right now there are multiple operations in the drag & drop editor that cause multiple updates in the DOM, when one or zero updates would be expected instead. We should make it so that those operations only update the DOM as little as necessary.

See also this issue for more relevant discussion and information - however, that issue is only about hiding the number of changes in the UI: https://github.com/mui/mui-toolpad/issues/781

Examples 🌈

• Dragging an element to the position it's already in should show no changes, but it adds 1 change to the DOM
• Dragging in a component as shown in https://github.com/mui/mui-toolpad/issues/781

Motivation 🔦

Fixing this will enable us to build undo/redo functionality a lot more easily in the future.