Course Overview

[00:00:00]
>> David Khourshid: What are we going to get out of this workshop? We're going to learn core principles of state management that will help you architect these solutions that scale with application complexity. And even though that we're going to be working on a React Next JS app, all of these concepts that you learned today, they're going to be applicable to any front end application.

[00:00:20]
Regardless of which framework you use. We're going to keep it high level and general. So we're not going to be going in depth into specialized hooks or the nuances of how Next JS does things, or the most shiny newest features of React. There's actually a lot of great front end masters courses already on that and I highly encourage you to check those out.

[00:00:45]
But we are going to at the same time be looking at common React pitfalls and anti patterns that you may have run into. And in general, we're going to be looking at opportunities to improve your code base and make it more clear, understandable and maintainable. Because at the end of the day, we want to model and manage our state in a way that is easy to maintain, it's easy to update, and it's easy for our team to contribute to.

[00:01:13]
And so the skills and concepts that you learn today are meant to be evergreen, they're meant to be, like I said, general, and they're meant to be skills that stay true whether React evolves, you use different libraries or maybe you work in different frameworks. All right, so the structure of this workshop, you should all have the repo.

[00:01:36]
It's GitHub.com davidkpiano Frontend masters state Workshop this workshop is split up into many lessons and exercises like you could see on the screen. Hopefully we'll be going through all of them and we're going to be working on many of them together. And I'm also going to hand a lot of these exercises off to you to start off and work on.

[00:02:02]
All of these lessons are designed to teach you general state management concepts and there's many that are actually also going to teach you specific patterns and anti patterns for React applications. So I strongly encourage you to apply these lessons to your own code bases or even other open source React projects.

[00:02:23]
Because I guarantee that even though we have exercises specific to this workshop, you are going to find things in your code bases where it's like, wow, that pattern applies here. So I could actually refactor my code base and make these changes. Also going to be showing you some third party libraries that you can use to help out and I do want you to understand the principles behind these third party libraries and the motivations for why you would use them.

[00:02:52]
But again, I'm not telling you that every single application you use needs to have all of these tools. That's absolutely not necessary. And especially for state management, you do not need to use third party libraries for state management. Like many developers, I have been through the struggles of managing state in large applications.

[00:03:16]
I worked in multi step forums where we did a lot of bespoke PHP and jQuery with very complex flows and async data handling. And I was doing this back in the angular and backbone days and unfortunately we weren't even allowed to use those frameworks. So when I was a junior developer I was also a visual learner and I really wanted to make sense of all this spaghetti logic.

[00:03:40]
So I started learning about these things called state machines and even state charts. And I created a library called XState. And XState is a library for managing state machines and state charts. And I do have a couple of courses on frontend masters for XState if you want to learn about it.

[00:03:58]
But that is not what we're going to be doing in this workshop. Instead we're actually going to be taking the main principles of event driven state management and that's honestly at the core of state machines and state charts. And we're going to be applying those principles to our React applications.

[00:04:17]
What is our purpose in doing that? First of all, we want to create these apps with understandability at its core. Again, you want to be able to understand your logic. You want your team members to understand what all of the logic in your application. You also want to be able to understand all of the use cases and all of the edge cases and train yourself to think of everything that can possibly happen in your application to prevent impossible states and impossible transitions.

[00:04:47]
We also want to be able to work in legacy applications so that we could understand and refactor messy legacy code so that it becomes a lot easier to add new features and fix bugs. And it's 2025, we have AI powered coding tools. In fact, our coding is going to be done in cursor.

[00:05:07]
And honestly, when your app is organized and your app logic is clear to a human, it's also very clear to an LLM. So if you're using a lot of AI assistance, then having clarity in your code and showing the LLM, this is my intention for this feature is really going to help.

[00:05:26]
Just to explain the workshop a little bit more so the structure, we have a bunch of exercises and they're all prefixed with Exercise Dash and so the first one that we're going to be starting with is the anti patterns exercise and you're going to see a few files here so you're going to see a page.

[00:05:47]
This is going to be the main page that you're going to be working on. You're going to see a readme that includes the contents of this lesson as well as a description of the exercise. And we're also going to have a scratch pad where you could basically just write whatever you want.

[00:06:03]
You could also do whatever you want in page tsx especially if you clone the repo, it's yours. So you could do whatever you want. And if you want to peek into the solution or I should probably say a solution again there's no one size fits all for state management so this is one of many possible solutions depending on your requirements for the app.

[00:06:26]
But if you want to peek in here while you're working on these exercises then this is an example solution that will help you.