Handling Reviews with React Context

Let's start by creating the ReviewsContext component at app/products/[id]/ReviewsContext.tsx.

Creating a ReviewsContext Component

ReviewsContext will be a client component because it needs to use context. Like before, we're going to bring in createContext and useState to manage our state, but this time we're going to bring in the Review type:

We'll create our useReviewsState hook, which will take the initial reviews like we did with the initialCartState before:

Next, we'll create the ReviewsContext which will use the output of the useReviewsState hook:

For accessing this context, we'll define another custom hook called useReviews. If it doesn't find a context, then it will return an error.

Finally, we'll create a ReviewsProvider that takes the initial reviews and uses the useReviewsState hook to initialize some state that we'll then pass down to any children using the ReviewsContextProvider:

Now we can bring the ReviewsProvider into our page.

Updating the Page to use ReviewsContext

Inside of page.tsx, we'll instantiate the ReviewsProvider with the product reviews inside of the ProductDetail return:

It's important to note that the only thing going to the client is the reviews, and none of the immutable data.

With ReviewsContext in place, we can remove the reviews prop from our Reviews and AverageRating components since they will now get this information from context:

Updating the AverageRating Component

Over in AverageRating.tsx, we need to update the component to get the reviews from context.

To do this, we'll import the useReviews hook and remove the reviews prop in favor of getting the reviews from the hook:

We'll follow a similar process for the Reviews component.

Updating the Reviews Component

Inside of Reviews.tsx, import the useReviews hook and remove the reviews prop.

This time, we'll bring in reviews and setReviews from the hook:

Now in the form for adding a review, we'll use setReviews to update our reviews based on the output of calling addReviewAction with the text and rating:

Checking Our Work

Back in the browser, when we navigate between routes, we can see that the reviews are changing from product to product.

We are also able to submit a new review and see the average rating update.

For example, adding a rating of 1 for the Wizard T-Shirt will lower the average rating to 3.3.

As one more check, let's check the the server output to make sure it includes reviews. This is important for SEO considerations.

When viewing the page source in the browser, searching for a a bit of the review text allows us to confirm that reviews are being rendered on the server:

We've successfully integrated state management for reviews into our ecommerce app using React's Context API.

Next, we'll explore how to re-implement this app using Redux for both client-side and server-side rendering.