Context API, Custom Hooks and Global State Management

A. Context lets a value be defined once and read by any component wrapped inside its provider, avoiding the need to pass that value down manually through every component in between, a problem usually called prop drilling.

StoreContext in FalCon Store holds the cart, current page, search term, category filter, and functions like addToCart and goTo, all bundled into one value passed to StoreContext.Provider.

B. Any component calls useStore() to pull out exactly what it needs from that shared context. The navbar reads cartCount to show the badge, while the checkout page reads cartLines and subtotal for the order summary, both pulling from the same source without either component knowing about the other.

C. Custom hooks pull out repeated logic into a reusable function. useToastQueue manages its own toasts array and addToast function internally, and StoreProvider calls it once for the customer side while AdminApp calls it separately for the admin side, so both sides get independent toast notifications from the same piece of reusable logic instead of writing it twice.

D. Global state management means keeping shared data, like the cart, in one place instead of scattered across components. In FalCon Store, cart data lives in StoreContext, so adding an item on the products page instantly updates the navbar badge and cart page too, without passing it manually between them.