Q1. What are the main components of an e-commerce cart?
Typically, you have a ProductList, ProductItem, Cart, CartItem, and possibly a Checkout component.
State manages products, cart items, and total price.
State manages products, cart items, and total price.
Q2. How do you manage cart state?
You can use
Each item has
Functions:
Use context or Redux for global access.
useState or useReducer with an array of items.Each item has
id, name, price, quantity.Functions:
addToCart, removeFromCart, updateQuantity.Use context or Redux for global access.
Q3. How do you calculate the total price?
Use a derived value: reduce over cart items to sum
This can be computed in the render or memoized with
price * quantity.This can be computed in the render or memoized with
useMemo.Q4. How do you handle adding items to cart?
When user clicks "Add to Cart", check if item already exists.
If yes, increase quantity; else, add new item with quantity 1.
Update state accordingly.
If yes, increase quantity; else, add new item with quantity 1.
Update state accordingly.
Q5. How can you persist cart across sessions?
Use
On app load, initialize cart from
Update
localStorage to save cart items.On app load, initialize cart from
localStorage.Update
localStorage in useEffect whenever cart changes.