Why you shouldn't build (some) games in react (or other declarative UI frameworks)

With React's popularity still staying strong, it's only natural it's used in a wide veriaty of situations. Animations and visual effects, interfactes for industrial machinery, router config etc. Recently, I've also seen a number of games try to use react. The result is... mixed.

What is react good at?

React translates state to UI. You just say this number should be 100 and it will set the visual UI to 100. It does this very efficiently, autmatically deciding what should be updated and what not. Modifying DOM elements is very expensive so it makes sense to have a lot of complex code to limit these, even if the code itself is also expensive.

This is great for most apps. The basic layout rarely changes, only changing some numbers or labels here and there, occasionally adding or removing a element. React is great for this, and it's efficiency really pays off.

In most apps, the layout is a lot more complex than the state. React also really helps here. In a typical layout mostly consists of elements that have fixed places always with just a occasional place where dynamic content is inserted. React is also great for this, since you can define much HTML in one component and just use dynamic elements and other components where nececairy.

What do games do?

Games are different:

React is very bad at this.

Thse disadvantages don't apply to every game. Incremental games can make very good use of react since they only update a little at a time. Even more complex games can potentially use React just for the UI and HUD. However, any game with many moving objects or a moving background will experience severe performance issues.

HTML is bad for games

Many of the issues with react apply to HTML in general. Browsers need to update the layout every time a element is updates which is very slow. Avoiding these updates is one of react's machinery strength. Even without react you will find it's really hard/impossible to get a game to run at a reasonable speed by maninipulating DOM elements.

Use canvas

Luckly, we have canvas. Canvas has many advantages for games:

In general, canvas is designed for games or game-like applications with many moving objects, animations, moving field of view, etc. So use it.