<p dir="auto">Hi, I used react-sortable-tree package im my react project in component named Tree:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from &quot;react&quot;;
import axios from &quot;axios&quot;;
import axios_config from &quot;./axios_config&quot;;
import &quot;react-sortable-tree/style.css&quot;;
import SortableTree, {
} from &quot;react-sortable-tree&quot;;
class Tree extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
    };
  }
  componentDidMount() {
    (async () =&gt; {
      axios_config.url = this.props.treeLink;
      axios_config.data = {};

      try {
        let result = await axios(axios_config);
        console.log(&quot;response from server gotttt...&quot;);
        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 (
      &lt;SortableTree
        style={{ height: &quot;300px&quot; }}
        treeData={this.state.treeData}
        onChange={(treeData) =&gt; this.setState({ treeData })}
      /&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">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 () =&gt; {
      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 (
      &lt;SortableTree
        style={{ height: "300px" }}
        treeData={this.state.treeData}
        onChange={(treeData) =&gt; this.setState({ treeData })}
      /&gt;
    );
  }
}
</code></pre></div>
<p dir="auto">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:</p>
<p dir="auto">`←→1 of 2 errors on the page<br>
Error: Unable to find node on an unmounted component.<br>
<g-emoji class="g-emoji" alias="arrow_forward" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/25b6.png">▶</g-emoji> 21 stack frames were collapsed.<br>
(anonymous function)<br>
src/components/utility/Tree.js:114<br>
111 | console.log(result);<br>
112 | if (result.data.done === true) {<br>
113 |   //console.log(result.data.tree);</p>
<blockquote>
<p dir="auto">114 |   this.setState({<br>
| ^  115 |     treeData: result.data.tree,<br>
116 |     selectedNode: result.data.tree[0],<br>
117 |   });<br>
<code class="notranslate"> </code>react-dom.development.js:24281 Uncaught Error: Unable to find node on an unmounted component.<br>
at findHostInstanceWithWarning (react-dom.development.js:24281)<br>
at findDOMNode (react-dom.development.js:24804)<br>
at ScrollingComponent.componentDidMount (index.js:181)<br>
at commitLifeCycles (react-dom.development.js:20663)<br>
at commitLayoutEffects (react-dom.development.js:23426)<br>
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)<br>
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)<br>
at invokeGuardedCallback (react-dom.development.js:4056)<br>
at commitRootImpl (react-dom.development.js:23151)<br>
at unstable_runWithPriority (scheduler.development.js:646)<br>
at runWithPriority$1 (react-dom.development.js:11276)<br>
at commitRoot (react-dom.development.js:22990)<br>
at performSyncWorkOnRoot (react-dom.development.js:22329)<br>
at react-dom.development.js:11327<br>
at unstable_runWithPriority (scheduler.development.js:646)<br>
at runWithPriority$1 (react-dom.development.js:11276)<br>
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)<br>
at flushSyncCallbackQueue (react-dom.development.js:11309)<br>
at scheduleUpdateOnFiber (react-dom.development.js:21893)<br>
at Object.enqueueSetState (react-dom.development.js:12467)<br>
at Tree.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365)<br>
at Tree.js:114`</p>
</blockquote>
<p dir="auto">React version: 0.0.0-experimental-0cc724c77-20211125 (and <code class="notranslate">main</code>)</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Build the current version of React in <code class="notranslate">main</code></li>
<li><code class="notranslate">open fixtures/flight-browser/index.html</code></li>
<li>Take note that the model never resolves, and the HTML in the fixture is never updated:</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/848147/149585758-7fd44bdd-f039-4da6-b069-fce798fb0a26.png"><img width="679" alt="Screen Shot 2022-01-14 at 3 10 58 PM" src="https://user-images.githubusercontent.com/848147/149585758-7fd44bdd-f039-4da6-b069-fce798fb0a26.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">The model never resolves, and the data is never rendered to the DOM.</p>
<h3 dir="auto">Other findings</h3>
<ul dir="auto">
<li>If you <code class="notranslate">console.log</code> each chunk individually using <code class="notranslate">response.getReader().read() ...</code>, you'll see chunks written, but some are duplicates, and some are out of order. In the reader, <code class="notranslate">done</code> never gets called.</li>
<li>If you remove the Suspense <code class="notranslate">read()</code> from the <code class="notranslate">Title</code> component in the fixture, everything <strong>works correctly</strong>.</li>
<li>If you add add a <code class="notranslate">console.log</code> <em>after</em> <code class="notranslate">let blob = await responseToDisplay.blob();</code>, it <strong>never logs</strong>. This means that <code class="notranslate">response.blob()</code> is hanging.</li>
<li>If you replace the contents of <code class="notranslate">display</code> with <code class="notranslate">renderResult(ReactServerDOMReader.createFromReadableStream(responseToDisplay.body))</code>, everything <strong>works correctly</strong>.</li>
</ul>
<p dir="auto">We're seeing this same behavior in Hydrogen: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1576966211" data-permission-text="Title is private" data-url="https://github.com/Shopify/hydrogen/issues/463" data-hovercard-type="pull_request" data-hovercard-url="/Shopify/hydrogen/pull/463/hovercard" href="https://github.com/Shopify/hydrogen/pull/463">Shopify/hydrogen#463</a> both when calling <code class="notranslate">renderToReadableStream</code> and passing that to <code class="notranslate">Response</code> in a Workers runtime, and when calling <code class="notranslate">renderToReadableStream</code> and consuming that stream in an SSR context. The chunks are written out of order and duplicated, and the response never resolves.</p>
<p dir="auto">It's very odd that the automated tests in <code class="notranslate">react-dom-server-webpack/.../ReactFlightDOMBrowser-test.js</code> 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 <code class="notranslate">Response.body</code>? — but I can't nail it down yet.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">The flight model resolves when using <code class="notranslate">renderToReadableStream</code> with Suspense, and the data is rendered to the DOM.</p>