3+ Uses of React at a Game Studio

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

What's React like if you come from a C#/C++ and Unity background? Making tools is easy, but can you ship a whole game with it?

This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Hendrik is a speaker at a conference who has a background in mobile game development using C++ or C# with Unity. He has also worked with web technologies and is currently employed at Playpack Games, a studio based in Berlin.

Playpack Games aims to create cross-platform games that include a strong, meaningful social element.

Hendrik primarily uses C++ or C# along with Unity for developing mobile games.

According to Hendrik, game development processes haven't changed significantly since the 90s, involving the use of source code, assets, and various tools to produce executable packages for different platforms.

Modern mobile games are expected to support features such as cloud storage for saving games, and in-game customer support that allows direct feedback and rewards from within the game.

Hendrik discussed using Firebase for storing player progress and building a React-based customer service tool that interacts with the database for managing game state and player issues.

Hendrick suggests using a content management system (CMS) where game content can be managed and edited, potentially using a database where entries are stored as JSON files for ease of use with external tools.

Hendrick points out that while web development offers robust tools and frameworks, integrating these into game development, especially for complex simulations like AAA games, can be challenging due to performance and compatibility issues.

Hendrik Demmer
Hendrik Demmer
29 min
02 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Game development challenges and solutions include saving games in the cloud, customer support tools, and remote changes to player progress. Custom editors in game development can be generated based on a database schema. The use of web technologies in game development can lead to faster and better games. The speaker discusses the tech stack used in game development, including TypeScript, React, and React Native. The talk concludes with advice for web developers transitioning to game development.

1. Introduction to Game Development

Short description:

I am Hendrik. I make mostly mobile games, and I'm curious about the web. I work at Playpack Games, a new studio in Berlin. We make cross-platform games with a social element. I'll present three case studies, real but illustrative. Let's make a single player game for mobile, casual and free to play. Game development hasn't changed much since the 90s.

♪♪ ♪♪ Wonderful. Thank you very much, Kathleen. Welcome to everyone. Thanks for joining here. It's going to be an interesting day, definitely, so I'll start with a quick introduction, again.

I am Hendrik. I do live here in this city, so very pleasure to give a talk here. I make mostly mobile games, and I do that in C++ or C Sharp using Unity, but as I said, I've always been very, very curious about the web ever since the very first times I started working. And I did work for some very cool companies down there on exciting projects with really smart people. So, some good times, but nowadays I work at Playpack Games, which is a new studio here in Berlin. Well, we're based here, but we actually work from anywhere, and there you see my wonderful team from all over the world. Our mission statement is to make cross-platform games with a strong, meaningful social element in there.

Right. So, a quick disclaimer, maybe. I'm quite new to React. If you're looking for a deep dive or technical things, there are much better talks for that at this conference, I'm sure of it. I'm going to present three case studies, and all of these are real, but I did change some of the names and the graphics, because that is from freelance times, and also to make it more illustrative.

Right, can I start with a quick show of hands? Who of you has ever made any form of game? Wonderful. Who has ever used Unity to do that? That's still quite a lot. Awesome. Very, very cool. I mean, this is the game's track, so I shouldn't be that surprised, but it's great to see. So, let's make a game. Let's make it single player. Why? Multiplayer is really, really, really hard. So, single player is much easier. Let's ship it on mobile and let's make it casual free to play, because that's what my studio does.

Game development, as it turned out, hasn't changed that much since the 90s, if we're honest. So, you sit at a computer, you have some source code, you have some assets, you have tools and editors to work with those. You pour them into a big box, and then out comes a package, which is like an executable, and that runs on some other person's computer.

2. Game Development Challenges and Solutions

Short description:

If you built nowadays to an Android device or an iOS device, you're still building a package. Game developers are specialized in making things look great and feel great. Let's set off, make a game, ship it to mobile platforms. People expect to keep their saved games in the cloud. Customer support can give feedback and rewards to players. Player progress is stored in a database. We can remotely change player progress. Build a customer service tool with a small React app. The tool schedules a command in the database.

Still pretty much the same thing. If you built nowadays to an Android device or an iOS device, in the end, you're still building a package, right? And as you see, at no point does the cloud or any form of servers come into play here.

Game developers are really specialized, right? They're front-end people who are really good at making things look great, feel great, performance, making games fun. But a lot of them are actually not very knowledgeable about the wider web world out there.

All right, let's set off, make a game, it takes a while, and then after three to six months, you have a game. Wonderful, maybe you made it in Unity, you ship it to mobile platforms, it is there, it's on device, right, it's single player, everything looks great. But it is not 1999 anymore, and people do have expectations. So, for example, when a player switches their phone, as people do, like every year, some of them, they expect to keep their saved games and not put them on a floppy disk. So we have to store them somewhere in the cloud. Right?

Another thing, people expect customer support, right? Customer support should be able to, within the game, directly give feedback or give rewards back to players. Right. Well, how do we start with that? Let's start with putting the player progress inside a database, right? How hard can that be? The progress is a single JSON document, it lives on the device. So instead of just having it on the device, we put it in a key value store, something like Firebase works really well. Big companies have their own solutions, right? There's an SDK for it. So we don't actually have to do any backend stuff.

Right. When the game loads, we load it, right? Whenever we do any changes, we write it back to the database. Works quite well. Cool. You notice something here. We can remotely change player progress now, right? Because we can mess around with the game state on the database. So let's do that and solve the customer service problem, right? OK, the case here is the player contacts us, the game misbehaved in some way, you know, something went wrong, and we want to reward them some currency or some items or something like that, right? And we want to write a small message in there. Now the customer service people should not like do manual entries in the database. So we should have a tool for this. What tools should we build? In what language? It should be usable by non-developers. Hmm, time to learn some React, right?

Case one, a customer service tool. You build a small React app, it talks to the database, right? Again, like Firebase, there is an SDK, you don't have to learn anything really hard, right? As a good pattern here, probably for stuff like this, don't write directly to the database and change the state, have the player confirm it, because it feels much, much nicer, right, as part of the customer service conversation. You can see here, the tool on the left schedules a command in the database. The device reads the command, applies it, and writes it back when it's consumed. Right, and then that is what this tool looks like, right? This should all feel very familiar to you guys, some material UI with some text boxes and maybe some custom editors, because you want to have these items in there and have some pickers and stuff.

3. Game Development Challenges

Short description:

And at the bottom, there's a big button which writes it all to the database. How does the React tool know which items are in the game or which resources? Can we visualize the progress of a player in the tool? Who takes care of updating this data when the game gets new content? Game designers use Microsoft Excel to visualize data, but it's limited for simulations. Write a small React app to isolate complex core logic. Build a content management system to manage all the content. Use a Git-like workflow for version control and store database entries as JSON files.

And at the bottom, there's a big button which writes it all to the database, and that's cool. So you host that somewhere, you protect it with OAuth or something, you know, protect it, and then hand it over to customer service and you're done. No developers needed ever again.

Well, right, how does the React tool actually know which items are in the game or which resources? Moreover, can we visualize the progress of a player in the tool somehow to the customer service people using it? And who takes care of updating this data when the game gets new content?

So let's take a step back. Let's go back to game development, right? In production, we are making our game and games are simulations, you know, more or less, right? And that usually means a more or less complex system, right? And complex systems are hard to reason about. And getting the difficulty right is really, really crucial. I mean, that's the game designers job to make sure that the game is fun because it has the right amount of difficulty.

So what is the main tool that game designers use? Yes, it's Microsoft Excel, because you know, that is a great tool, actually for visualizing big amounts of data content numbers. You have formulas in there, but when it comes to running simulations, it's actually very limited, right? What if you want to introduce randomness, or things over time, or you have feedback loops in there?

So again, why not write a small React app, right? You isolate this complex core logic. You basically make it a mini game. You have some sliders and all of that, right? And you build that together with your designer. It's very fast to iterate because you do it stand alone, completely independent from the rest of the game. When you're happy with it, you transfer all of that back to the game.

But you have the same problem here. Where is all that content managed, right? Where does that live? Hmm. So why not go all in, right, and build a content management system? I mean, after all, if I look at the sponsors, this is something that React seems to be quite popular with, right? So let's take all of these spreadsheets, all of this content, and move it into some form of content management system. Right. What should we use? Well, question number one, what database should we use? I personally really like a Git-like workflow. This is something we're used very much to in Game Studios, to have some form of version control there. So like branches, tag versions. It should be easy to set up locally, maybe usable offline. I don't know. I like to work on the train. Git for data is a really interesting problem. If you know more about this, like databases that have a Git-like workflow, talk to me, because I'm really curious about it. But in the end, what we went with is just having every database entry as a single JSON file. Right? So this is very easy to read by external tools, your engine or your react tools. It's very easy to diff in Git. People are very used to that. And it supports references quite well, right? If you think about it a bit.

4. Custom Editors and Game Dev Challenges

Short description:

If you have a database schema, you can generate custom editors based on it. This is inspired by Rails. You can write custom editors in React, with features like drop-down fields and inline spell checking. In the game dev world, we don't have link-based navigation, validations, undo and redo, or browser tabs. Engineers take monorepos for granted, but in game dev, dealing with submodules and distributed repos is more complicated. Having source code access for everything is not common in the game dev world, but in a monorepo, you can easily navigate to any part of the source code.

And then, moreover, if you have like a database schema, you can generate like custom editors based on that schema. Right? So you know that certain entry inside of the schema is a string with certain validations. Then you render a text field and apply these validations to that. Right. This is very much inspired by Rails. I know it's been a while, but that was one of the first things I got exposed with the web and I found very fascinating. Right.

Moreover, if you want to go really deep, you can really write custom editors. It's fun in React, I find. Right? And you have stuff like drop down fields out of the box. You can tell the writer that writes these dialogues that their text is running a little bit long. And maybe you have inline spell checking and all of that. And that leads me to a very important point, because you guys take a lot of things for granted. That we don't really have in the game dev world. Right?

Think about what your users take for granted. And users, in my case, is the rest of my team who have to work with this CMS, right? Link based navigation. You don't have that in Unity. You don't have that in Excel. Right? Validations, hard to really, you know, you have to put in some work, undo and redo, spell checking, that's just a browser plugin away. And moreover, browser tabs are amazing. Right? You can have multiple views on the same data. And doing that in Unity, for example, becomes really complicated.

Moreover, the things you take for granted as engineers, and I assume there are some engineers here, right? Monorepos are a game changer. In game dev, usually you have to deal with, I mean, at best sub modules, maybe distributed repos, maybe someone home-brewed a Package Manager. Right? It's all a lot more complicated. We're not used to having source code access for everything. Unity's closed source. A lot of things are opaque source. So you can kind of guess or maybe find an old version. And moreover, if you have it in some monorepo, you can just click navigate to any part in the source code.

5. Game Development and Tech Stack

Short description:

That's amazing. Iteration times in game development have drastically improved with technologies like ES build and browser reloads. Hot module reload allows for code changes while the game is running, a feature not commonly found in the games world. Browsers, despite their reputation, are reliable cross-platform deployment tools. The tooling, including debuggers and profilers, is mature and well-supported. We built a whole game in TypeScript and React, with a runtime in TypeScript and an editor built on top of the content management system. The game is deployed to iOS and Android devices using React Native. Open source solutions provide CI pipelines, and third-party SDK support is robust. React Pixie is used for rendering the in-game UI, enabling easy iteration and changes while the game is running.

That's amazing. We're not used to that. Iteration times. If you ever worked with Unity, you know it takes a few seconds. In C++, you might talk about minutes until you get your build on device. Whereas with stuff like ES build and browser reloads, you can get down below a second. That's just amazing.

Hot module reload is an absolute game changer. Being able to do changes to the code base while the game is running and see the changes immediately reflected, even on device is absolutely amazing. We don't have that in the games world usually.

Moreover, I know browsers get a lot of flak for being not standards compliant. But in general, they are surprisingly reliable as cross-platform deployment tools. You have web sockets. They're a really, really powerful tool to talk from client to server and just set up things any way you want. And in general, I would say that the tooling is very, very mature. You can really tell that a lot of big tech companies invested a lot of time and money to make sure that debuggers and profilers are really good.

Well, why do I talk about all of this in this past way? Well, actually, remember this game I mentioned at the beginning, right? So here it is, running inside of the content management system in the browser. And the cases one and two are like this admin link here and the customers playground tool there on the right. Again, these happened in other companies, but it is such a common use case that this happened again in this project.

So yes, we built a whole game in TypeScript and React, right? The runtime is in TypeScript. The editor is built with React on top of the content management system. There's a little 3D world. There's hours of gameplay. There's multiplayer hopefully coming quite soon, right, powered by Node.js and WebSockets, and all of this is deployed to iOS and Android devices, right? Because there is more React, right? You can just use React Native and ship out things to iOS and Android, right? Open source is amazing. You get CI pipelines as a solved problem, right? You don't have to set up your own Jenkins to make builds and deal with signing and all of that. A lot of people have solved these problems. And third-party SDK support is quite good, right?

Moreover, and I find that really fascinating, we do use React Pixie to render the in-game UI. It's, I think, the most experimental part of this tech stack, but also one that had amazing benefits when it came to being able to iterate and make changes to UI in a running game, move things around and work with the rest of the team there. Again, hot module reload is amazing.

6. Game Development and Web Tech

Short description:

You can absolutely ship a game made with web tech to devices. But even if you just build tools, you can already learn a lot and it can help make your games a lot better. Open source is absolutely amazing, right? The things that are out there that you can just piece together. I mean, Pixie.js deserves a huge shout out. It's an amazing engine. It's very fast. Community is great. Codebase is very, very readable. Right. I do think game development can learn a lot from the web. Right. Ultimately, the hope is that this leads to making games faster, and I do think faster game development in the end leads to better games, and that is what, you know, our industry is, in the end, all about.

Right. This would be a bad talk if I said that everything is amazing, right? And this is what you should do. Some caveats here. If you want to build a AAA first person shooter, I'm not sure this is the way you should be going, right? Native engines have very, very good performance, have graphic stacks that you will not be able to match easily on your own. Moreover, a lot of the things you saw there, require custom tooling. This is not something you can easily pick off the shelf.

I want to point out the learning curve here. Again, I'm quite new to React, right? So, coming from game dev, this is actually quite a change. Like React with hooks, you really have to wrap your mind around that to make sure you, you know, get into that way of working. Maybe it's all very normal to you right now. I'm just saying that onboarding and also hiring are quite interesting problems when you're, like, a little bit out there. And that is this question here, right? How big is that overlap between the web world and the games world? Not just in the technical sense, but also in the people sense. And, I mean, this track does give me a lot of hope, but it's a little bit of an open question.

To summarize, you can absolutely ship a game made with web tech to devices. But even if you just build tools, you can already learn a lot and it can help make your games a lot better. Open source is absolutely amazing, right? The things that are out there that you can just piece together. I mean, Pixie.js deserves a huge shout out. It's an amazing engine. It's very fast. Community is great. Codebase is very, very readable. Right. I do think game development can learn a lot from the web. Right. Ultimately, the hope is that this leads to making games faster, and I do think faster game development in the end leads to better games, and that is what, you know, our industry is, in the end, all about.

And that's it. Thank you guys very much. Thank you. Thank you.

QnA

Q&A on Git, Go, and TypeScript

Short description:

Thank you very much, Hendrik. Why not using Git instead of Adibi for game entities and their properties? Yes, it is Git for the database. Did you look at Go? It made sense to go with our own tech stack. Go is definitely a learning curve. Coming from a C-sharp background, switching to TypeScript was quite easy. I found it very smooth to transition over.

Thank you. Thank you very much, Hendrik. What a nice presentation. I would like to invite you here on the chair because we have some questions from the audience.

Wonderful. Yeah. So let's go with the first one. I was also wondering why not using Git instead of Adibi for game entities and their properties, and data amount is surely not overwhelming. Right. So it is actually Git, right? All of these files are in source control exactly for that reason. But, you know, that still means stuff is file-level. It's not a transaction-based database, for example, right? But, yes, in the end, the question is absolutely justified. And yes, it is Git for the database, yeah.

Great. There is another question coming from an anonymous user. Did you look at Go. to check out the great... Of course, I did look at Go. It is a very cool engine, and they did make a lot of changes in there. We did look at it in the end for what we were trying to achieve. It made sense to go with our own tech stack there. And I was wondering about the learning curve there, because it's a different language, right? As far as I... Go. is definitely a learning curve. One thing I did not mention is that, coming from a C-sharp background, switching to TypeScript I found actually quite easy. It's the same team at Microsoft that built these two engines, and you can see that they transferred a lot of ideas. So I found it very smooth to transition over into TypeScript. Just give me one second, because there are so many... While I'm going through the questions, I also have a question on my own. And I was wondering more about the, you're mentioning form validation.

Game Dev Q&A

Short description:

We wrote our own solution for the use case as existing options didn't fit. SCAD refers to simulations in computer games, particularly single-player games. We don't have specific server state management learnings, but we used what worked for us. We haven't bridged native code to the browser using WebAssembly, but it's not necessary as TypeScript allows us to have everything in one code base.

And I was wondering, what have you used for that? Well, we wrote that ourselves. I was looking at JSON schema, and there's a bunch of things around in that way. In the end, nothing really fit the use case, so we wrote that ourselves. So strings with regexes and references then have to look up whether certain files, like database entries exist.

Okay. There's another question. What would SCAD be a simulation of? I'm not sure what SCAD is. I don't know that. If someone from the audience? Well, all right. I mean, that was... All right, so fair enough. Not all games are hardcore simulations, but a lot of computer games are simulations, in particular single-player games. I should have made that more clear.

Okay. There's another interesting, like server state management learnings. If you have any, like event streaming cores, small F or open CRUD. So yeah, large apps. Do you have any learnings from this perspective, like server to state management solution? Can you specify that? I'm not a web expert, so I don't know all of the terms. Like using, for example, event sourcing, CQRC and nest.js. Maybe if someone is in the audience here, you can go talk with Patrick afterwards. Yeah, talk to me afterwards. That's the thing. The web ecosystem is so big, it's impossible to keep an overview of all the cool things out there. So in the end, we went with the stuff that worked when we pieced it together.

There's another question, have you tried bridging any native code you already had to the browser using WebAssembly? WebAssembly, I have used mostly as a user. It is surprisingly good for our deployment. It's actually not necessary, and I don't mind writing my game code in TypeScript. So I have everything in one code base. It's very easy to interoperate. Thank you.

Game UI Tools, Backend Handling, and React Native

Short description:

Do you have tools to create in the in-game UI in React? Open sourcing game development tools. Handling the backend for heavy load online shooter or MOBA game. Estimating parts on the client side. Using assets purchases from Unity Asset Store in web-based games. Moving from React to React Native.

And there is another one, do you have tools to create in the in-game UI in React, or like built-in tools? So that is actually a really big open topic. I talk a lot with our UI and UX designer about this, and that is something we want to address because these tools don't exist. So we're looking at maybe taking an existing UI tool and writing an exporter that will export to ReactPixie or maybe doing some tooling ourselves there. But it's a really interesting open question.

Yes, just a follow-up question, because I was also wondering because you were mentioning about creating your own tools internally. Have you ever thought about open sourcing them, or is there anything open sourced at all or what's the future? I mean, I do wish and hope that we can open source a lot of these things. Game development, as you notice, is not very affine to open sourcing. I think it's mostly historical, but also it's the pace of game development that you often don't have the time and resources to be able to maintain an open source project on the side.

There is another question, how do you handle the backend for heavy load online shooter or MOBA game? That's a really hard question. Again, maybe this might not be the right tech stack for that. If you want a heavy shooter, if you run that over web sockets, you might run into problems, you may want something that can actually run native on your device and then make use of UDP. There are solutions for that, but maybe that's not the right tech for that. Is there any possibility to just estimate some parts on the client side? What do you mean, estimate? Like, to see the future on the client side before getting... Oh yeah, yeah, no, no, you absolutely have to do that, right? With web sockets, you're talking about latencies in the dozens to hundreds of milliseconds, so, you need to work a little bit to hide the latency. Ok, so that's why you were saying coming soon, the multiplayer part, right? I mean, also making multiplayer games is really hard. Ok... There is another question. Can you use assets purchases from Unity Asset Store in your web-based games? Yes, you can, yes. I mean, you have to work a little bit, but there are stuff that can, like, take OBJ files maybe, or FBX files and turn them into mesh data that you can upload as vertex buffers. I mean, that sounds a little bit out there, but for game developers, that's actually very, very common. That's something we do every day, so that's fine. I do have another question on my own, and you're mentioning also React Native. I'm a huge fan of React Native, and you're saying about React Pixie, or what was the process for moving from React to React Native, or what you had to do to make this happen? Right. You mean, in the end, shipping the whole thing? Yes. Right. So, the current deployment process is to have the game running as a web game, and then wrapping that inside of a web view, inside of a React Native application. I gotcha. And then bridging through into the Native calls. Okay, so like a hybrid. It's a hybrid app.

React Native, State Management, and PIXI

Short description:

Are you using other tools apart from React Native for state management or API connections? No, it's actually just React and HTTP calls. You choose the right stack. Maybe you can try Axios and Prisma. Does PIXI work in React Native? With PIXI 5 or 6, it didn't work properly. The browser WebView seems more trustworthy. We want platform-agnostic deployment.

Okay. There is another question as a follow-up to React Native. Are you using other tools apart from React Native for state management or API connections? So, I know you guys know much more about this, but I'm okay to do like Axios HTTP calls, and that's pretty much my limit. So I did want to look into this whole, like GraphQL and the way you can like do modern APIs, but that's a little bit out of my depth. So for the moment, no, it's actually just React and you know, doing calls.

Yeah, it really depends because nowadays people are not betting on GraphQL anyway. So it's, yeah, I think you, you choose the right stack though. Maybe you can also give up React query, try it with Axios and also maybe Prisma. They're also sponsoring us. And we do have time for one more question, I believe.

And this is does PIXI work in React Native? That was actually my question as well. Right. And if yes, how performant it is? Right. So old school PIXI did, I think version four or so was supported to run into React Native. The guys at Expo. Yeah, they did that and like Evan Bacon had a talk about deploying tons of games. And it looked amazing. I gave that a try. And then with PIXI 5 or 6, it just didn't work properly anymore. So I wanted to take a look at that. But then in the end, you have the browser WebView as a compatibility layer in there. And to me that seems much more trustworthy than shimming some OpenGL calls into some native stack that I don't control as well. Okay. Yeah. Yeah, I think as far as I know, he also built some games using Expo 3js. Yeah, and he ported quite a lot of web packages to React Native, which is really... It's really amazing. But for our case, this did not really work. Also, we do want to be able to do like completely platform-agnostic deployment. Right.

Web Developers Transitioning to Game Development

Short description:

If you're a web developer interested in game development, there's a lot to learn. The pace and mindset in games are different, but it's a fun community to be a part of. Both web development and game development involve people who want to build cool stuff. So take the plunge and make games. Thank you, Hendrik, for being here on the stage. It was a pleasure to have you.

So if we want to make a web game, it should also just work as a web game. All right. And I think it is the last question. Just to summarize everything, what do you think are the learnings from a web developer perspective if they are coming or if they would like to go to game development, what do you think are their... Right. Or what there is to learn, basically. Right. I mean, there's for sure, there's a lot to learn. I think like the pace and the mindset in games are quite different. But it's still, I mean, it's very fun. They are both, I think, very fun communities to hang around in. I mean, you see a conference like this and then you see games conferences. And there's a very similar vibe of just people wanting to build cool stuff. So I would say if you're looking for that, take the plunge, right, go in, make games.

Yeah, thank you very much. With that I think, yeah, people can find you on the Q&A, Discussion Rooms for the remote audience, yeah, thank you very much, Hendrik. And it was a pleasure to have you here on the stage. Wonderful very much. Thank you very much, guys. I just give you a huge round of applause, Hendrik.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Next.js for React.js Developers
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js for React.js Developers
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.