In my experience (author of ReactForDataviz) the React renders SVG approach starts struggling around 10,000 to 50,000 nodes depending on hardware and what kind of calculations you’re doing.
Directly manipulating the SVG DOM with D3 (wrapped in a React blackbox) goes to around 100,000 nodes. After that you really have to start using canvas or webgl.
At those numbers you also start getting huge performance gains by mutating data and doing less copying. Everything you learn in “how to do react” tutorials quickly starts being wrong when your arrays have thousands of elements.
Edit: there’s also a lot you can do with how things are nested. The flatter your DOM, the fewer nodes React has to touch for every update
Directly manipulating the SVG DOM with D3 (wrapped in a React blackbox) goes to around 100,000 nodes. After that you really have to start using canvas or webgl.
At those numbers you also start getting huge performance gains by mutating data and doing less copying. Everything you learn in “how to do react” tutorials quickly starts being wrong when your arrays have thousands of elements.
Edit: there’s also a lot you can do with how things are nested. The flatter your DOM, the fewer nodes React has to touch for every update
Here’s a fun stress test I built a while back that goes up to a million nodes rendered by React https://swizec.com/blog/a-better-react-18-starttransition-de...