Scenario context: App displays "watchlists" of various stock ticker prices in a list. The user can add however many "watchlists" as he/she pleases. Each watchlist contains stock items, which display last price etc...

Current Hierarchy:

• Container (Grandparent) connects to stock data websocket, houses watchlists, passes websocket message down via props
  • Watchlist (Parent) houses stock items, passes websocket data to child via props
    • Stock item (Child) renders stock prices from websocket data prop

Attempted designs: I have tried a couple designs, they all function but they are not performant.

1. Pass websocket data from Grandparent -> parent -> child via props (Slow, re-renders all watchlists)
2. Each child listens on websocket to render stock price (Very slow, a single websocket cannot listen to hundreds or thousands of watchlists)

Question: What is an efficient and performant component design for reading a single data source (Grandparent's websocket data in my case) in hundreds or thousands of react children?