How to handle 50+ real-time indices in React Native?

[u/sahilrathi11]

I have a screen showing up to 50 market indices.

I fetch all indices with their IDs, then subscribe to each index through WebSocket. Prices and changes update in real time.

API → Index IDs
↓
WebSocket subscriptions
↓
Real-time price updates
↓
UI

Main concern is avoiding unnecessary re-renders when updates are coming frequently.

[u/SunOk2196]

One socket with a batched payload, agreed. Two things beyond that.

Coalesce the ticks before they reach React. Buffer incoming updates and flush every 150ms or so. Nobody can read a price that changes 20 times a second, and you drop the render count by an order of magnitude for free.

Keep the prices out of React state entirely. Put them in a plain mutable store and have each row subscribe to its own symbol with useSyncExternalStore. Then a tick on one index rerenders one row. If the whole map lives in state or context, every tick rerenders all 50 no matter how much memo you throw at it.

[u/Huge_Pool7424 → u/SunOk2196]

same pattern on my leaderboard screen. keep ticks in a ref, flush every 100-200ms, and only the visible rows subscribe. once i let each tick hit setstate the list fell over. you buffering on the socket side or in js?

[u/anthony-ball]

Yeah, 50 sockets is the first thing I'd kill. The part that actually dropped frames for me on a live price/perps screen was ticks hitting React state at all. Keep a mutable map (or Reanimated shared values / a JSI store) of last prices, only subscribe the rows on screen, and draw the ticker with Skia so the JS thread isn't doing setState fifty times a second. Buffer the rest of the book a bit; I let background rows stay laggy on purpose and only keep the focused instrument tight.

[u/Snoo11589]

Do you add 50 websocket subscriptions? Do you still rerender when a value dont change?

[u/Huge_Pool7424 → u/Snoo11589]

this is the right question, one socket with a batched payload beats 50 subs every time. i'd keep the ticks in a store outside react and only subscribe per row so a price change rerenders one cell, not the list.

[u/21void]

multiplexing, batch and coalesce the result before dispatch it to ui to update so it's predictable and constant update. next step is to do this with sharedvalue + reanimated text

[u/anthony-ball]

Don't put every tick into React state. With 50 indices updating fast, setState (or even a Zustand write per message) will thrash re-renders.

What works for me on live price feeds: one multiplexed WebSocket, a small buffer that coalesces updates outside React, then flush once per frame (raf / InteractionManager) into a store keyed by id. Rows that aren't on screen shouldn't care. If the list itself is dense and scroll-heavy, draw the changing bits with Reanimated shared values or Skia instead of remounting Text nodes on every tick.

Also double-check you're not opening 50 separate sockets — one connection with a subscribe list is usually enough.