I've been using React to make a 60fps music game, and this article covers basically all of the issues I ran into:
- Originally, the game was rendered with SVG elements, so it was very important to use the shouldComponentUpdate hook to ensure elements weren't rendering unnecessarily (and using CSS transformations to position them where possible, as that's way faster than updating SVG coordinates!)
- I had something similar to the function.bind problem since some of my components had a map of hotkey handlers that I was (naively) returning from a `getHotKeyHandlers` function, meaning the handlers were redefined every render.
- I wasn't caching/memoizing calculations done to the Redux state as well as I should have (Reselect is very useful for this!)
I ended up deciding SVG wasn't fast enough for my use case and rewriting the core game loop rendering to use Canvas, which was so much faster that I could be a lot lazier about optimizing things. Everything around the canvas is still rendered through React components (i.e. in game UI and menu screens), and the state is still handled through Redux. It's a very fun way to write a game :)
That looked interesting but I didn't need the most important functionality it provides (click/touch handling, fancy text rendering, etc) so I stuck with just using the Canvas API. It's pretty simple to do in React: https://gist.github.com/thomasboyt/bcc496c823a01ac5f648
I might be missing something here: what benefit does React bring in this example? If you're using canvas to render without any kind of virtual DOM, why use React at all?
Oh, nothing on its own in that tiny example. In practice, it's just a component that could be used in a larger application and can be easily tied into the same rendering and state trees.
- Originally, the game was rendered with SVG elements, so it was very important to use the shouldComponentUpdate hook to ensure elements weren't rendering unnecessarily (and using CSS transformations to position them where possible, as that's way faster than updating SVG coordinates!)
- I had something similar to the function.bind problem since some of my components had a map of hotkey handlers that I was (naively) returning from a `getHotKeyHandlers` function, meaning the handlers were redefined every render.
- I wasn't caching/memoizing calculations done to the Redux state as well as I should have (Reselect is very useful for this!)
I ended up deciding SVG wasn't fast enough for my use case and rewriting the core game loop rendering to use Canvas, which was so much faster that I could be a lot lazier about optimizing things. Everything around the canvas is still rendered through React components (i.e. in game UI and menu screens), and the state is still handled through Redux. It's a very fun way to write a game :)