3 ms·
Ask HN: Can React pump 10,000 bunnies?
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)
- dakom 9y agoBtw 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 ;)
- shams93 9y agoTry 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.
- dakom 9y agoCool, hadn't looked into inferno before. Just joined the slack and asked there - thanks!
- acemarke 9y agoHi. Afraid I don't have time to dig into the actual behavior of this myself, but I do have links to a number of articles on optimizing React perf at https://github.com/markerikson/react-redux-links/blob/master/react-performance.md https://github.com/markerikson/react-redux-links/blob/master... . You might also want to drop by the Reactiflux chat channels at https://www.reactiflux.com https://www.reactiflux.com and see if anyone has any suggestions.
- dakom 9y agoWow that's some collection you got there!! nicely done