Comment by avolcano | Hacker News Reader

Comment by avolcano | Hacker News Reader

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 :)

Do you think React Canvas is a thing you could have used?

https://github.com/Flipboard/react-canvas

I've still not had a chance to play around with it, but the Flipboard mobile site looks phenomenal.

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?

Can't you combine? Thinking it could be used for UI. Makes sense when you need more support, like localisation and other builtin stuff. Just guessing.

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.

From my understanding, React Canvas handles which parts to redraw for you. Redrawing the entire Canvas with each frame is not performant.

Canvas is nice... until you need to embed a video into it.

cant you avoid that by using a video element, and placing it over the canvas with CSS?

Not if you use clipping-paths in the canvas, or if you want to partially overlay the video with canvas elements.

Reply on news.ycombinator.com