Consuming SSE Streams in React with EventSource
Connect to an SSE endpoint with EventSource in useEffect and display streaming data in real time.
Creating an EventSource Connection
new EventSource(url) creates an SSE connection to the specified URL. The browser immediately opens an HTTP GET request with the header Accept: text/event-stream. The server keeps this connection open and streams events. EventSource is a browser-native API — no library required for basic usage.
Connection Lifecycle States
EventSource has three ready states: 0 (CONNECTING) — connection is being established or re-established, 1 (OPEN) — connection is established and events are flowing, 2 (CLOSED) — connection is closed and will not reconnect. Check eventSource.readyState to determine the current state.
All lessons in this course
- SSE vs WebSockets vs Polling Comparison
- Consuming SSE Streams in React with EventSource
- Long Polling Pattern and Reconnection Logic
- Building a Real-Time Notification Feed