Issue 1:
Hi, I used react-sortable-tree package im my react project in component named Tree:

import React, { Component } from "react";
import axios from "axios";
import axios_config from "./axios_config";
import "react-sortable-tree/style.css";
import SortableTree, {
} from "react-sortable-tree";
class Tree extends Component {
constructor(props) {
super(props);
this.state = {
treeData: [],
};
}
componentDidMount() {
(async () => {
axios_config.url = this.props.treeLink;
axios_config.data = {};

try {
let result = await axios(axios_config);
console.log("response from server gotttt...");
console.log(result);
if (result.data.done === true) {
this.setState({
treeData: result.data.tree,
selectedNode: result.data.tree[0],
});
this.props.disableLoading();
} else {
console.log(result.err);
this.props.disableLoading();
}
} catch (err) {
console.log(err);
}
})();
}
render() {
return (
<SortableTree
style={{ height: "300px" }}
treeData={this.state.treeData}
onChange={(treeData) => this.setState({ treeData })}
/>
);
}
}

when I use Tree component in my code it works pretty well in react 16.13.1, but fails and get this error is react 17.0.1:

`←→1 of 2 errors on the page

Error: Unable to find node on an unmounted component.

▶ 21 stack frames were collapsed.

(anonymous function)

src/components/utility/Tree.js:114

111 | console.log(result);

112 | if (result.data.done === true) {

113 | //console.log(result.data.tree);

114 | this.setState({

| ^ 115 | treeData: result.data.tree,

116 | selectedNode: result.data.tree[0],

117 | });

react-dom.development.js:24281 Uncaught Error: Unable to find node on an unmounted component.

at findHostInstanceWithWarning (react-dom.development.js:24281)

at findDOMNode (react-dom.development.js:24804)

at ScrollingComponent.componentDidMount (index.js:181)

at commitLifeCycles (react-dom.development.js:20663)

at commitLayoutEffects (react-dom.development.js:23426)

at HTMLUnknownElement.callCallback (react-dom.development.js:3945)

at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

at invokeGuardedCallback (react-dom.development.js:4056)

at commitRootImpl (react-dom.development.js:23151)

at unstable_runWithPriority (scheduler.development.js:646)

at runWithPriority$1 (react-dom.development.js:11276)

at commitRoot (react-dom.development.js:22990)

at performSyncWorkOnRoot (react-dom.development.js:22329)

at react-dom.development.js:11327

at unstable_runWithPriority (scheduler.development.js:646)

at runWithPriority$1 (react-dom.development.js:11276)

at flushSyncCallbackQueueImpl (react-dom.development.js:11322)

at flushSyncCallbackQueue (react-dom.development.js:11309)

at scheduleUpdateOnFiber (react-dom.development.js:21893)

at Object.enqueueSetState (react-dom.development.js:12467)

at Tree.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365)

at Tree.js:114`

Issue 2:
React version: 0.0.0-experimental-0cc724c77-20211125 (and main)

Steps To Reproduce

Build the current version of React in main

open fixtures/flight-browser/index.html

Take note that the model never resolves, and the HTML in the fixture is never updated:

The current behavior

The model never resolves, and the data is never rendered to the DOM.

Other findings

If you console.log each chunk individually using response.getReader().read() ..., you'll see chunks written, but some are duplicates, and some are out of order. In the reader, done never gets called.

If you remove the Suspense read() from the Title component in the fixture, everything works correctly.

If you add add a console.log after let blob = await responseToDisplay.blob();, it never logs. This means that response.blob() is hanging.

If you replace the contents of display with renderResult(ReactServerDOMReader.createFromReadableStream(responseToDisplay.body)), everything works correctly.

We're seeing this same behavior in Hydrogen: Shopify/hydrogen#463 both when calling renderToReadableStream and passing that to Response in a Workers runtime, and when calling renderToReadableStream and consuming that stream in an SSR context. The chunks are written out of order and duplicated, and the response never resolves.

It's very odd that the automated tests in react-dom-server-webpack/.../ReactFlightDOMBrowser-test.js do not fail under these same conditions. I'm trying to pinpoint the conditions where this happens — e.g. is it when a ReadableStream gets sent through a Response.body? — but I can't nail it down yet.

The expected behavior

The flight model resolves when using renderToReadableStream with Suspense, and the data is rendered to the DOM.