The price of rendering elements using D3 in a React application?

I've worked on a project (private, unfortunately) where I used D3 to represent a UML editor. Everything used SVG manipulation to draw an SVG representing the UML.

The Editor UI logic was implemented in a unique React element (UMLEditor), using TypeScript and D3. You could pass the editor properties to set changes in the UML, and callbacks to get back the data. For instance, you can drag and drop a UML class (in 60fps), but the UI only triggers two events (drag, and drop) to React callbacks.

The key is to have the logic and events separated from the UI manipulation, and have a small amount of big react elements, and not so many small elements.

It could manage a UML with around 4K classes in 30fps.

Edit: Let's define a small application. You have small react components with its children, like the root App element, a Navigation bar, a viewport, etc...

Every element but the UMLEditor have a small impact on the performance. UMLEditor element is a complex element without any React children. Every UI element inside it is rendered using D3. The real DOM of UMLEditor contains a complex SVG element managed entirely using D3.

To make this element interact with React, we pass as props callbacks for events like drag, drop, create new UML class... and one JavaScript class with all the D3 render logic.

We don't pass as prop the entire UML configuration, as it would have a negative impact on the performance. Instead, when we needed it for exporting purposes, the JavaScript class passed as a prop can give the whole UML configuration using a method.