Hacker News new | ask | show | jobs
by SeanAnderson 1145 days ago
I'm still reading this, but I just wanted to say this bit of your analysis was SO cathartic for me to read:

> React+Redux setup was too much performance overhead for the real-time gameplay section. The state updates through the Redux action reducer pipeline, and the minimal React render updates were enough to cause noticeable hiccups in the gameplay frame rate. Performance in the browser environment is susceptible to garbage collector management. To minimize garbage collector hits, you need to use object pooling. Object pooling is a mutable state management pattern in which you pre-allocate a pool of objects. The collection of allocated objects gets mutated and reused during the program's life to minimize runtime memory allocations. This object pooling pattern conflicts with the immutable update patterns of React and Redux. Hitting these performance issues was a significant roadblock and essentially became a 'rewrite' in which I had to rewrite the game state management to be performance optimized. This rewrite was costly and took a lot of time.

This is 100% the conclusion I came to when trying to build a web-first game from a React/JS background and it's wildly reassuring to read someone else coming to similar conclusions.

1 comments

Damn, it took me years to accept that dropping C-style or C++-style explicit memory management in favor of garbage collection was an overall improvement. And now we have to reuse and mutate objects instead of creating new ones because of it.
The React style forces a lot more object creation and copying then you're probably imagining. If you want to update an array, you generally have to make a new array, and copy over all the data except for your mutation: https://react.dev/learn/updating-arrays-in-state

If you, for example, hold your voxel level data in a big array, that means copying that data every time the level is modified.

"The React style forces a lot more object creation and copying then you're probably imagining."

Its not react style its literally the core of how react works(immutablity). To rerender a component you need the new state to point towards a new reference to an object/array (hence the copying data to a new array) because JS compares objects/arrays through reference and not value. Not exactly react's fault but how JS works.

I said "react style" because they are not using React in a conventional way: https://github.com/kevzettler/react-regl
I can see the need for memory management for a game. There are other things, also graphics related like map points or point clouds.

You are more likely to a struct of arrays than an array of structs/objects as well. Very handy in C but also JS.

I suppose you can use a sliding window object (or “fly” object) that pretends to be the object when the data is really split across various arrays, just don’t actually loop over them. ;) I bet someone has done a library for something this way and used proxies.