<p dir="auto">I'm currently updating the new React DevTools to use suspense for more interactions (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="435315627" data-permission-text="Title is private" data-url="https://github.com/bvaughn/react-devtools-experimental/issues/196" data-hovercard-type="pull_request" data-hovercard-url="/bvaughn/react-devtools-experimental/pull/196/hovercard" href="https://github.com/bvaughn/react-devtools-experimental/pull/196">bvaughn/react-devtools-experimental#196</a>). This has uncovered three pain points that we should try to address:</p>
<ol dir="auto">
<li>
<p dir="auto"><del><strong>Using the "two <code class="notranslate">setState</code> pattern" can be awkward</strong> if the priority is "normal" or higher (as was the case in my "keydown" event handler) because <code class="notranslate">scheduler.next</code> uses "normal" priority for this case. (This also applies to e.g. non-React event handlers, since the default priority for these is "normal" as well.) <strong>Temporary workaround</strong> - manually run the first update with user-blocking priority.</del></p>
</li>
<li>
<p dir="auto"><del><strong>Offscreen updates</strong> cause user-blocking and normal priority work to be batched together (for unknown reasons). This makes interactions feel unresponsive. <strong>Temporary workaround</strong> - none (other than to stop using offscreen priority).</del></p>
</li>
<li>
<p dir="auto"><strong>Fallback UI shown too quickly</strong>. One of the main reasons to use suspense in the "inspected element" panel to begin with is to avoid a quick flash of the "Loading..." fallback when a new element is selected. However, it seems like this is still happening even with suspense. <strong>Temporary workaround</strong> - none, since I don't know the cause.</p>
</li>
</ol>
<p dir="auto"><strong>Edit</strong> I think the first two items I reported were caused by a second/duplicate scheduler package that had gotten installed in DevTools as a transient dependency.</p>
<p dir="auto">Describe what you were doing when the bug occurred:</p>
<ol dir="auto">
<li>Clicked record before firing off the onClick function</li>
<li>When I clicked stop recording this error was thrown.</li>
</ol>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.7.0-23309eb38</p>
<p dir="auto">Call stack: at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:164298)<br>
at I (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:163705)<br>
at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:166664)<br>
at Ul (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:342328)<br>
at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:62450)<br>
at tl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:71793)<br>
at zl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:113765)<br>
at Ic (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:104502)<br>
at Tc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:104430)<br>
at Dc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:104298)</p>
<p dir="auto">Component stack: at Ul (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:342099)<br>
at div<br>
at div<br>
at div<br>
at Co (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:263571)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:366677<br>
at n (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:276314)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:278724<br>
at div<br>
at div<br>
at Xi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:325177)<br>
at Ge (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:207026)<br>
at sn (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:216342)<br>
at Va (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:293773)<br>
at us (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:371869)</p>