Long Polling Pattern and Reconnection Logic

Long polling works in a cycle: the client sends an HTTP request, the server holds the connection open until new data is available (or a timeout occurs, typically 30-60 seconds), the server responds with the data, and the client immediately fires another request. This creates a near-continuous connection with server-push characteristics.

Long polling in React uses an async recursive function inside useEffect. The function makes a fetch request, processes the response, and then calls itself again. An AbortController signal stops the recursion when the component unmounts. The function loops as long as the component is mounted and no abort has been signaled.

Create an AbortController at the top of the useEffect: pass controller.signal to every fetch call. In the cleanup function, call controller.abort(). This cancels any in-flight request when the component unmounts, preventing state updates on unmounted components and network resource leaks.

When a long poll request fails, do not immediately retry — wait before the next attempt. Exponential backoff doubles the delay on each consecutive failure: 1s, 2s, 4s, 8s, 16s, capping at 30s. This prevents hammering a failing server and allows time for transient issues to resolve. Reset the delay to 1s on a successful response.

With many clients polling the same server, exponential backoff without jitter causes "thundering herd": all clients back off the same amount and retry simultaneously, overwhelming the server again. Add jitter by randomizing the delay: delay + Math.random() * delay. This spreads retries across a time window, reducing server load spikes.

Maintain connection status state to reflect the polling lifecycle: isConnecting (initial connection or reconnecting after error), isConnected (last poll succeeded), isError (consecutive failures, max retries reached). Display this status in the UI so users understand the real-time data reliability.

During the backoff delay before the next retry, you can show a countdown: "Reconnecting in 8s..." with a progress indicator. Compute the retry timestamp when setting the backoff timer and update the display each second. This transparency reassures users that the app is actively trying to recover.

Use recursive setTimeout (call the next poll inside the response handler) rather than setInterval for polling. setInterval fires at fixed intervals regardless of how long the previous request took — long-running requests can cause overlapping polls. Recursive setTimeout only starts the next poll after the previous one completes.

Expose the polling interval as a configuration option in your hook: useLongPoll({ url, interval: 5000 }). Different data sources need different freshness: a "who's online" indicator might poll every 30s, while a task status might poll every 5s. Avoid hardcoding intervals in implementation code.

As your API matures, you might replace polling with SSE for better efficiency. The React component using a polling hook should be abstracted from the transport layer. If your hook exposes the same interface (onData, status, error), switching from polling to EventSource underneath requires no changes in the component that consumes the hook.

When the server holds a long-poll connection and no data arrives, it must respond with a timeout (200 with empty body, or 204 No Content) to prevent the connection from hanging indefinitely. The client then immediately polls again. This server-side timeout (30-60s) is separate from the client-side fetch timeout (longer, e.g. 90s).

Why does long polling use exponential backoff when retrying after connection errors?

Long polling: client requests, server holds until data available or timeout, client re-requests immediately after response. Implement with recursive async fetch in useEffect and AbortController for cleanup. On error: exponential backoff (1s, 2s, 4s... capped at 30s) plus jitter to prevent thundering herd. Use recursive setTimeout over setInterval to prevent overlapping polls. Track isConnecting/isConnected/isError state for UI feedback.