Rendering 10,000 nodes without dropping a frame

The problem

A customer's data lineage graph had just over ten thousand nodes. Panning felt like dragging through mud. The React profiler showed every node re-rendering on every viewport change.

Memoise everything that renders

The single biggest win was wrapping custom nodes in React.memo and making sure their props were referentially stable. That alone took us from 12fps to 34fps.

export const TableNode = memo(function TableNode({ data }) {
  return <TableCard columns={data.columns} />;
});

Only render what is visible

onlyRenderVisibleElements skips nodes outside the viewport. Combined with simplified 'level of detail' nodes when zoomed out, we hit a steady 60fps.

• Memoise custom nodes
• Stable nodeTypes
• Narrow store selectors
• Visible-only rendering
• Level-of-detail nodes below 0.4 zoom