Should you build a Web Game in React instead of Vanilla Javascript?
If you’re reading this I’m sure you already know that React is still technically Javascript but with a huge library that changes A LOT of things. So more features should make it easier to build websites and web apps right? From my experience, I found that using React actually makes building web games, specifically, harder and in this blog, I will explain why that is.
Game Logic
So one thing that generally doesn’t change, is the logic as it's still vanilla Javascript, an if statement in React and Javascript are the same. However, the way you access it, call it and the way it renders is a whole new type of headache.
Now you need to deal with Parents and children, with their state and props, instead of just accessing the variables and methods you need by just importing the correct files. This in my opinion is the biggest difference and the biggest headache.
Targetting
As someone who has just built a basic game in React, I can also say that the process of modifying individual things or a group of things becomes much harder, especially when it involves graphics.
I built a Basic game that you have to click the black square on the 4x4 grid and it appears somewhere else randomly. Each click increases your score by 100 and it continues till a white square is clicked and the game ends.
Instead of just targetting the square directly and changing its color when it was clicked like I would do in JS, in React I had to set an inline style that assigned the color to a certain string containing ‘white’ or ‘black’ that was in an array in state. Where this really became a mess is when I had to modify the 16 string long array and pick out the two that needed to change while leaving the others unchanged.
This may not seem like a big issue at first but when you scale games up and they need a lot more variables, graphics, and targetting it can be very time-consuming and inefficient.
Scaling
I personally have not scaled a game up to be a decently big size because I cannot imagine the nightmare that would be. For the reasons mentioned above and more, like the rendering, it will eventually be so hard to scale that it would be less work to rebuild it in Javascript.
However, if you are more comfortable writing React, or you just want to practice your React in an extreme way you can build a small-decent sized React game and it will definitely teach you a lot about React but if you have plans of scaling that up to a big game then, in my opinion, it’s not worth the effort.
Rendering
Anyone that has used React knows that rendering is a strong and really important part, however, it can be confusing and it is not hard to get lost or find yourself unable to render everything the way you want it to.
When it comes to games, in which for the most part many things are rapidly changing, it can be a struggle to make sure everything renders properly at the right time.
Advantages
One thing that React definitely has going for it, is its speed. That’s one of the main reasons for using it in general for websites. This could help in certain cases if used correctly.
Another thing it does pretty well is how it uses its routing to make transitioning between pages really fast, but other than going from one menu screen to another it's not used that often.
Lastly, it generally has more compatibility but this isn’t really a big point. There may be more advantages and disadvantages I didn’t mention but these are the ones I came across.
Conclusion
When it comes down to it, should you make a game in React over Javascript? NO! There are too many things that make it harder like targetting, rendering, state and props, and scaling. Unless you just want to get comfortable with React, since using an extreme method, like making a game, will really teach you how to navigated and work React. The real answer is actually to not use React or Javascript since some game engines actually support browsers.
