How I fixed React Drag-and-Drop for 100k+ Row Virtual Tables

If you’ve ever tried to build a drag-and-drop table in React, you already know the pain. Standard vertical lists are easy. But the moment you try to build a fully virtualized 2D data grid where users can drag both rows and columns simultaneously, almost every open-source library breaks down. Usually, one of two things happens: The Layout Thrash: The library uses React State/Context to track the mouse coordinates, causing 60 re-renders per second across your entire DOM tree. The Virtualization Crash: The drop zones rely on physical DOM nodes. The second a user scrolls and a virtualized column unmounts, the drag engine loses its reference and the UI breaks. I got so frustrated with these bottlenecks that I decided to build a highly specialized, bare-metal drag engine specifically for React tables. It’s called react-table-dnd, and to make it work at 60fps with 100,000+ virtualized rows, I had to stop using React for the heavy lifting. Here is the architecture of how it works under the hoo