Learn to code in multiplayer game part 3
Making a multiplayer game with React Hooks is hard
Previously I mentioned that I had ported a large chunk of the backend logic to the frontend and some of that code was using recursivesetTimeout to achieve unit movements and attacks. I said I would convert setTimeout to React.useEffect hook. Well I did, and the result is less than splendid.
From a developer point of view, the code is much cleaner and easier to wrap my head around than the previous recursive setTimeout, but from a player’s perspective, this has been disappointing. The performance dropped significantly to a degree where I could see the frame rates due to lag.
— before:
— after:
I’ve tried several performance improvements that usually do the trick for all the webapps I’ve previously built which includes a multiplayer turn-based game. That one’s called ZombearsAttack if you’d like to play with friends but it requires a group of 5 players+ for each round.
For example, I’m implementing React.useCallback for the heavy calculations then only passing the function variable into React.useEffect dependency array to be called, which helps with caching but still no dice.
Usually we’re not too concerned with rerenders as it’s relatively cheap, but there’s just too many rerenders with this one. To be fair, this game has a lot more moving parts than the typical webapp.
Even so, I’m committed to making this work so I purchased a course to learn more about advanced React performance debugging which cost -$600 😭 , but I also spend more on takeout in a month so I’m not really complaining.
To wrap up, I very much prefer this way of using side effects to move units rather than recursive setTimeout, but sadly I’m going to have to park this for now as I learn more from that course.
Of course I didn’t deploy this version of the app given the state that it’s in, but I did deploy a different version of the app this week where I fix a bug that sporadically prevents a player from writing the last closing quote to create a new unit. This one was hella tricky as the error itself seemingly had nothing to do with typing that last closing quote. More on this in the next article!
The premise for the WaddleWaddle app is to embody a combination of comprehensive learning platforms such as Codecademy and good old video games that keep you entertained and wanting to do more.
I’ve always enjoyed strategy games since I was four and more recently I had a really fun time playing Clash Royale, so I’m putting these two very different systems together in as complimentary of a way as possible to bring you a totally new learning experience.
The Ambition:
- To make learning code less intimidating and more enjoyable, entertaining, and approachable.
- To raise awareness that anyone who wants to be a software engineer can be a software engineer.
- To make lessons more accessible for more people.
We are opening up our prototype to the public for early alpha access! Bring your friends and come learn JavaScript in a fun never before seen way!
waddlegame.com
I do tutoring for JavaScript on the first Monday every Month on Meetup
We will also be live-streaming the events on YouTube and Twitch
Join our Discord community, I’m always happy to chat about code!
I will be blogging about technical challenges, mistakes made, and lessons learned while building the WaddleWaddle app. Follow me here if that’s a journey you’d like to read about!
