Ask HN: Can React pump 10,000 bunnies?

1 points by dakom ↗ HN
I took a rough go at using React to drive something like the "PIXI bunnymark", and performance sucks:

https://github.com/dakom/react-pixi-bunnymark

Is the bottleneck React itself? I've tried a few different things you can see there (introducing mutability, using PureComponent, etc.) but the numbers are still not great (it should be able to hit 10,000 bunnies at 60fps easily without a hiccup on a consumer desktop pc, I get slowdowns way before that)

Someone mentioned looking into how React-Native does things and somehow replacing the renderer... but I'm not sure if that's really very different from what's happening here since ultimately the drawing is done by rendering null and pushing commands to PIXI. In other words the render tree really is just in-memory classes, there's nothing pixi's actually rendering when you get to the end of the line, so I'm not sure if replacing the renderer is worth the headache (there's no bunny-mark on the pixi-react project but I've opened an issue to ask for one so maybe if they can beat this, there's hope).

Looking for some veteran advice before I go down this rabbit-hole (pun intended). Like most things with performance tuning, theory is nice but if you can prove your suggestion by showing the gains either with a fork or a similar showcase, that's much better (500 cells on a page doesn't count, even at like 3,000 bunnies this is fine)

5 comments

[ 3.0 ms ] story [ 11.8 ms ] thread
Btw this is my first "Ask HN" post... not sure if I did it right since I don't see it on the "ask" tab and everything's greyed out :\. Happy for advice on that front too ;)
Try it with infernojs it has basically the same structure as react but is supposedly much higher performance this might be a great demo for react versus inferno performance if you find significantly better inferno performance for what is basically the same code on your end.
Cool, hadn't looked into inferno before. Just joined the slack and asked there - thanks!