Look at this 🗑 garbage 🗑 component - XYFlow performance issue

[drifting meadow]

Look at this component: https://github.com/ShaderFrog/editor/blob/main/src/editor/components/Editor.tsx

The body of this component is around 2,000 lines long. Any single change to the graph, like:

• Dragging a node around
• Dragging a slider in a node's UI, modifying its custom value

Causes this top level Editor.tsx component to re-render, because the Editor needs to know about the graph.

This is in a 60fps webGL editor, and any graph change tanks that because the Editor re-renders.

Most of the state is in Zustand, but because the top level component needs to know about the graph, it still re-renders on every graph change.

What can I do here?

[nova river]

If your graph has changed, your editor is going to have to re-render, so not really sure there's much of a way around that.

[drifting meadow]

@nova river I'd be surprised if I was the only person who had this problem - a complex editor that has a graph in it

[drifting meadow]

I could do something like keep a draft graph around, or graph changes, and debounce updating the top level graph