Let's say I'm building a shopping app and one of the features it has is to give users the ability to browse a category of items. While browsing the items, the user can store the items into their own lists (like Amazon's wish list feature). Therefore, I have a component called `item` which shows an item to the user.

The item component allows the user to click a `+` icon in it which will show the user's their lists. Then the user can select a list to add the item to. Kind of like what YouTube did here: <https://i.imgur.com/pAKVBBv.png>.

I also plan to have a list page, where a user can browse the items of a specific list they made. The list page would have a lot of `item` components.

The problem is that while there are many `item` components displayed on the page, **they all need to know the lists that the user has created**, and their lists are retrieved from a web server (from a database).

So how would I do this? I could have all of them make an HTTP request, but that would execute an HTTP request for each item on the page, only to get the same data. I could pass this responsibility to a parent component, but sometimes the `item` components would be by itself with no parent to get the lists from.