[enhancement]: Replace array indices with WeakMap for stable React keys

[zapeture]

Description: Currently, the Block renderer uses array indices as React keys which can cause performance issues during content reordering. We should switch to using WeakMap for stable key generation. There was a FIX ME for this enhancement here and here

Current Behavior:

• Uses array indices as React keys
• Uses deprecated substr() method
• Potential reconciliation issues during content reordering

Proposed Solution:

• Implement WeakMap to store stable keys for content nodes
• Replace array index keys with unique node identifiers
• Update deprecated substr() to slice()

Benefits:

• Better React reconciliation process
• Improved performance for dynamic content updates
• Proper garbage collection of unused nodes

Implementation Notes:

• Add WeakMap with useRef in Block and BlocksRenderer components
• Generate unique keys using Math.random()
• Cache keys for reuse

[monolithed]

Could you elaborate on your point about using random keys? Generating a new key on every render will cause the component to unmount, leading to significant performance issues and unpredictable behavior. The same goes for using WeakMap with useRef. What performance loss are you referring to with numeric keys? WeakMap only works with objects and doesn’t persist between renders, unlike stable keys.