What will suspense look like for the streaming case?

[benlesh]

Do you want to request a feature or report a bug?

A discussion, at the request of @gaearon.

Questions

I'm very curious what the public API will be for Suspense in streaming cases. The work I do or have pretty much always done in React involves dealing with streams of data, generally coming over a web socket. What will it look like? Will it be easy for users to implement/use? Is a promise/thenable an appropriate type for dealing with this even internally, given that the first value may never show up?

Desire

The ability to leverage suspense to "suspend" until the first of many values arrives from a stream of data coming from any source. For the sake of conversation, we'll say a web socket.

Constraints

• The first value may never arrive
• The source may close without error, having never provided a value
• There must be an ergonomic teardown mechanism, for example how developers can currently teardown in the returned function of useEffect or in componentWillUnmount.
• There may be more than one value returned by the streaming source

Optional constraints

• The first N values form the source may be synchronous (followed by asynchronous values)

Scenario

A simple app with two routes, one where the app needs to open a web socket connection and collect streaming data, and the other where the socket connection should be closed. The values from the web socket may take long enough that the developer will want to move to that routed component right away and show some spinner with suspense until the first bit of data arrives. If the user navigates to the first route, then leaves before the first value arrives, what happens?

My concern is, that if, even internally, the mechanism is a promise or thenable, there is a chance leaks will be created in the event that the source of that first value is torn down before the first value arrives. The only way, with a thenable or promise, to avoid that chance would be to make sure that the teardown mechanism was somehow tied to the thenable, so that the thenable to be rejected (or resolved) with a known value, such that it will be "settled".

[rostero1]

Any updates on this? Let's say i have an app where most of the actions / state comes from a websocket message. If i don't want put the result of these messages in some global state, I could have a child component subscribe to the websocket's onmessage with useEffect and then react on those messages. But how would this work if that child component, or one of its parents, gets suspended?