Verify One Shared Wishlist State

Use the two controls together so the shared context earns its keep.

Step 1 — Save from browse

Add a movie from MovieCard, then open that movie’s detail route. Because both components consume the same context, the detail button should already show the saved state.

Step 2 — Save from details

On the detail page, remove or add the movie with WatchlistButton, then return to browse. The card heart should reflect the new state without any extra synchronization code.

Step 3 — Watch the application boundary

Do not add local wishlist state to either component. The context is the single owner; components only read isSaved and call toggle.

The two consumers should both be using the same pair of values:

const { isSaved, toggle } = useWishlist();

That line is the important connection: both controls are asking the same provider for the same wishlist state.

Checkpoint

The same movie can be saved or removed from either browse or the movie detail page, and both controls update to the same state immediately. A refresh will still clear it for now; persistence is the next module.