Use the React Context API to Globally Manage Cart State in a Next.js App

InstructorColby Fayock

Share this video with your friends

Send Tweet

Using React hooks like useState makes it easy to manage things like a shopping cart, but that state may only be available one instance at a time. What if we wanted that state to be available between multiple pages?

We can take advantage of React's Context API which lets us extend our cart state by making that state available anywhere we want in the app.

In our app, we want to move the cart from the Home page component to the header which requires us to use context. We will wrap our app in a CartContext.Provider and pass in cart from our cart hook. This will allow us to grab subtotal and checkout for the Nav component.

🚨There is no video covering the creation of the Nav.js file. Make sure to review the GitHub so you don't miss that.

NHI TRAN
~ 4 years ago

Is there a performance worry about using usecontext with that data that will frequently change? Doesn’t updatingcart state trigger a rerender for all items?

Colby Fayockinstructor
~ 4 years ago

Is there a performance worry about using usecontext with that data that will frequently change? Doesn’t updatingcart state trigger a rerender for all items?

hey! It might be a small hit but it should be negligible, especially compared to the benefits being able to manage that state globally

~ 4 years ago

i feel like there spot missing between lessons 10 and 11 we jump from no nave to saying we implemented nav with no section covering that, just a heads up

Will Johnson
~ 4 years ago

i feel like there spot missing between lessons 10 and 11 we jump from no nave to saying we implemented nav with no section covering that, just a heads up

That's was intentional, this lesson was more about showing the concept vs adding the cart to the nav

zackhitch
~ 3 years ago

Second, what happened on Nav? Very confusing, made me go back a lesson to see if I missed it.

~ 3 years ago

When I remove the cart list I am returning the following error:

Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Home.

~ 3 years ago

Resolved the issue above. Removed a tag.

I am curious, from your code -- how were you able to import Nav from the file path you provided. Is the suffix (.js) hidden?

~ 3 years ago

Returning Error As:

Unhandled Runtime Error

IntegrationError: Client-only Checkout does not support prices with usage_type=metered in items[0].

When running:

<button onClick={checkout}>
                    <a>🛒 ${parseFloat(subtotal).toFixed(2)} </a>
                </button>
~ 3 years ago

Problem resolved:

Had to uncheck the 'used metered' option in the 'Product Pricing' section of Stripe.

23mwest
~ 3 years ago

Agreed that the Nav is confusing. Not sure why it was intentional to omit the whole creation of the components folder and structure.

pavloldev6
~ 3 years ago

The missing Nav made me confused too and I wasted time trying to find if I missed something.

Eduardo Mora
~ 3 years ago

I was a little upset that there are things that are just assumed like "We made this nav and you need to as well" before following along. What would be better is "before we go on, here is a challenge: Make this nav and then come back to this video". Makes the learner less confused and makes them solve a challenge as a practice.