Transcript

I've copied the contents of the cart context directory into the cart context with initial state directory, install my modules, and run it, and I'm ready to go. So let's go take a look over at our layout because that's actually where all of the action is going to happen. So in the layout, we have the current cart, but we're just ignoring it.

So what we want to do is we want to go and send that cart to our cart provider. Of course, it doesn't know it needs a cart. So let's go over into our cart provider and upgrade that. So we're going to take a new property called cart, and then I'll take cart and map it to initial cart, and then I'll pass that onto our useCartState hook.

UseCartState will take that initial cart, and then use it as the initial value. Let's save, and let's try it out. Now when I hit refresh, it starts at two in our cart context, and I bring it up, we've got our cart context, we're good to go from the initial render.

So actually, let's go take a look at the ViewPageSource. So we can see that two hidden in all of the HTML, and that two from the server tells us that we are properly initializing that cart context on the server with that cart. So that on the initial server render,

even though it is a client component, it does render on the server, we're getting the correct cart count right there. You can also see if you scroll a little bit further down in your HTML, the RSC code that connects the server with the client. You can actually see that the cart is being serialized by

React and then passed on to the client. Then during client hydration, that cart is then hydrated on a client so that the context on the server matches the context on the client. Now all this is being done because over here in the layout,

we are passing that cart as a property from the RSC into that cart context. When you pass properties from an RSC into a client component, they are serialized by React. So why don't you join me in the next exercise where we wrap up our React state implementation of

our e-commerce app by adding the product reviews functionality.

solution

Pass Data from the Server to the Client Context

Jack Herrington

The first action takes place in our Layout component.

We already have created a cart in there, so now we'll add it to the CartProvider:

Now we need to update the CartProvider to accept the cart property.

Updating the Cart Provider

In the CartProvider inside of CartContext.tsx, we'll introduce a new property called cart, which is then mapped to initialCart. This initialCart is passed on to our useCartState hook.

The useCartState takes the initialCart and uses it as its initial value.

Checking Our Work

After saving these changes, refreshing the app starts the cart count at two, confirming that we have the data we expect from the initial render.

Checking the rendered HTML with "View Source", we can see further proof that everything is working.

Note the HTML that contains the cart count of 2:

Even though the Header is a client component, it does render on the server.

Further down in the rendered html is the React Server Component code that connects the server with the client.

During client hydration, React serializes the properties passed from an RSC into a client component. This ensures that the cart context remains consistent between the server and client.

We can see the encoded JSON for the initial cart data:

Recapping the Context Initialization

Our context is being initialized because of the setup we did in the Layout component.

In the Layout, which is a React Server Component, we pass the cart as a prop to the CartContext, which is a Client Component.

When you pass properties from an RSC into a client component, they are serialized by React.

In the next exercise, we'll wrap up our React state implementation of our ecommerce app by adding the product reviews functionality.

Transcript

our e-commerce app by adding the product reviews functionality.

// In CartContext.tsx
const CartProvider = ({
	cart: initialCart,
	children,
}: {
	cart: Cart,
	children: React.ReactNode,
}) => {
	const [cart, setCart] = useCartState();

	return (
		<CartContext.Provider value={[cart, setCart]}>
			{children}
		</CartContext.Provider>
	);
};

{\"cart\":{\"products\":[{\"id\": 1,\"name\":\"Castle
T-Shirt\",\"image\":\"/castle-t-shirt.jpg\",\"price\":25},{\"id\":2,\"name\":\"Dragon
T-Shirt\",\"image\":\"/dragon-t-shirt.jpg\", \"price\":25}]}}

State Management with React Context

Redux for State Management

Zustand for State Management

Jotai for State Management

Outro

Transcript

Pass Data from the Server to the Client Context

Updating the Cart Provider

Checking Our Work

Recapping the Context Initialization

Transcript

Pass Data from the Server to the Client Context

Updating the Cart Provider

Checking Our Work

Recapping the Context Initialization