00:00 When it comes to state management, Redux has been synonymous with React for years. If you needed state management in your application, you used Redux. And that applied to Next.js as well. You put all your data in your Redux store and you use it in any component, in any place, both on a server and on the client.

00:16 But now with the app router, they have flipped the tables on us. Now we have two different types of components. We have the React server components, or RSCs, that only render on the server. And then we've got the client components that render both on the client and on the server.

00:34 And to make matters even more complicated, the app router can now render asynchronously, which means that potentially a single server can handle more than one request at a time, which leads us to rule number one, which is no global stores. We're used to simply defining a store as a global variable, which is really easy.

00:51 But now the app router can potentially handle multiple requests simultaneously, which means that if you put all your data in the store, you could potentially have data from two different requests at the same time. So customer one, because the customers choose data, and that's not great.

01:08 So how do we manage a store, like a Redux store, without declaring as a global variable? Well, you're going to learn that and much more as we go through this tutorial. Now our second rule relates to our first rule. And our second rule is that RSCs shouldn't show data from the store,

01:24 which is pretty easy to enforce because it's hard for an RSC to get access to the data in the store when the store isn't defined globally. And that's kind of a clue that we shouldn't be showing that kind of data in the first place.

01:37 In fact, rule number three is that RSCs should show immutable data and client components should show mutable data. So what am I talking about here? So immutable data are the types of data that don't change during your session with the page.

01:56 Mutable data are things that can change on the client. Throughout this tutorial, we're going to use a simple e-commerce application that has some immutable data, like the list of products, as well as a description and the price for each product, and then some mutable data, which is going to be changing on the client, like the cart, as well as the product reviews.

02:15 So this tutorial is all about how to manage that mutable data using either React Hooks and Context or a global management system like Redux, Sushdand, or Jotai. And at the end of this tutorial, you will have rock-solid patterns for how to manage mutable state on a client.

02:34 Now let's start out by implementing our cart using React Context and Hooks.