How does the screen update when the server changes?

Pick the transport by how fresh the data must be and how much you can spend: polling, Server-Sent Events, or WebSockets.

Match the transport to the freshness

Polling refetches on an interval. It is simple and always a little stale. SSE pushes one way from server to client, which fits a feed that only flows down. WebSockets are two-way (usually via Socket.IO) for chat, presence, or anything the client also sends back.

For [feature], the data needs to feel fresh within about [N seconds]. Is interval polling, SSE, or WebSockets the right transport, and what is the trade-off I am accepting with that choice?

Let the live signal poke your cache

Do not repaint by hand. When an event arrives, invalidate the data cache (for example a TanStack Query key). The affected list refetches and the UI updates on its own.

When my app receives a live event for [resource], which cache key (for example a TanStack Query key) should I invalidate so the UI updates, instead of mutating component state directly?

Default to the simplest transport that meets the freshness the feature actually needs, then let the live event invalidate your cache rather than hand-patching state.

Additional Resources

Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.

MDN Server-sent events

Documentation

A one-way stream from server to client over a single HTTP connection.

https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events

MDN WebSocket API

Documentation

The browser primitive for a two-way, persistent connection between client and server.

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

Socket.IO

Documentation

A library over WebSockets that adds reconnection, rooms, and fallbacks, with a browser client for React.

https://socket.io/docs/v4/

PreviousNext