How to efficiently integrate Blockly for drag-and-drop coding blocks into a React application?

I’m working on a project to integrate Blockly into a React application. The goal is to create an interactive drag-and-drop programming environment to help beginners visualize algorithms and understand programming concepts.

Goals:

1. Embed a Blockly workspace in a React component.
2. Dynamically load and save blocks from/to JSON.
3. Customize the toolbox for algorithm-related blocks.
4. Ensure smooth performance as the number of blocks grows.

What I’ve Tried:

• Used @blockly/react for basic embedding.
• Defined blocks using JSON but faced issues with dynamically reloading them.
• Customized the toolbox, but UI responsiveness drops with larger datasets.

Questions:

• What are the best practices for integrating Blockly with React to ensure performance and scalability?
• How can I dynamically update the workspace without unnecessary re-renders?
• Are there libraries or patterns for saving/loading blocks efficiently in a React app?

Any guidance, resources, or code examples would be greatly appreciated!