Introduction

[00:00:00]
>> David Khourshid: Welcome to the State Management at Scale workshop at Frontend Masters. My name is David Khourshid and I'll be your instructor today. So, first of all, what do I mean by state management at scale? Does it mean like lots of users, a thousand components, or like just a million lines of code?

[00:00:21]
And actually scale, at least when we're talking about state management at scale is isn't really about size. It's actually all about maintainability and iteration speed as your app evolves. So the questions that you have to ask yourself are, can you add features without breaking existing ones? Can your team members contribute confidently to your code base and can you actually debug issues quickly?

[00:00:45]
So that's what I mean by scale. And so by the end of today, after this workshop, you're going to have patterns that scale on hopefully all three dimensions. First of all, features. So you want to be able to add new functionality by extending your code base and not modifying too much if you can help it.

[00:01:05]
You also want to have a good understanding of the code base for your teammates, because usually when you're working on a big project, it's not just you, you're working with your teammates. And so you want to have everyone coding in a very similar way, preventing merge conflicts and more importantly, preventing confusion, whether you're new to the code base or you've been coding in it for many, many years.

[00:01:30]
The third one which I'm going to really focus on in this workshop is complexity. And so that's state management that you can debug and understand, especially as you add features, change features, fix bugs, et cetera. All right, so first of all, who is this workshop for? This workshop is for React developers, and honestly, any sort of a front end developer, whether you're working in React Vue, Angular, doesn't matter.

[00:01:58]
But our focus today is going to be on a React next JS app. But the idea is that we're going to be going beyond the basics of React state management. You probably already know your basic hooks, such as use date, use effects, use reference, and you might know the other hooks too, like useContext, useReducer, and maybe you've used some of the other ones like UseMemo, et cetera.

[00:02:24]
And you have worked in large or small React applications, some of which are in production, and some of them you might have been using React for a while. So you might have legacy code bases that use class components or hopefully newer ones that use hooks instead of classes.

[00:02:43]
And you attending this workshop, you've worked with a team and most of you have gone through honestly, like all of these common struggles of managing states in a large application. So you might have tried state management libraries or maybe you've invented your own solutions. I've seen a lot of code bases where basically they said, we're not going to use a third party state management library.

[00:03:08]
We're going to either try to use react hooks as much as we can, or we're going to try to build our own thing. And even those sort of end up in disaster in the long run. You have also felt the pain with dealing with an ever growing number of features and bugs in your application.

[00:03:26]
And maybe you have run into things like the dreaded infinite loop and use effect. I know I have lots of times, or even worse, when you have a lot of multiple chain use effects and you're like, okay, there's a bug. I don't know what is causing this. So you have to sort of debug every single use effect and see what is causing the other one to trigger.

[00:03:48]
And it sort of feels like a Rube Goldberg machine instead of a state machine. And it becomes just near impossible to debug. And so we're going to be talking about that later too.