Reactdom.render Cause Chrome Debug React Stuck

I'm trying WebStorm and VSCode to debug React, both of them have this issue. I'm using the following simple React code and the Chrome debug is stuck. How to reproduce: See my vide

Solution 1:

update:

following add "beforeunload" is trouble, it need add "beforeunload" code in project

the better way is make webstorm or vs plugin, use "chrome devtools protocol", before refresh run js "ReactDOM = null"

update:

in short, the solution is add following

window.addEventListener("beforeunload", function(event) {
            ReactDOM = null
        });

This bug still exist in latest chrome, here is issue

I find tmp solution

before refresh, in runtime run js "ReactDOM = null" and then refresh will not stuck

so here is my code:

window.addEventListener("beforeunload", function(event) {
        ReactDOM = null
    });

ReactDOM.render(app, domContainer);

the stuck reason is:

react code:

functionunbatchedUpdates(fn, a) {
    var prevExecutionContext = executionContext;
    executionContext &= ~BatchedContext;
    executionContext |= LegacyUnbatchedContext;

    try {
      returnfn(a);
    } finally {
      executionContext = prevExecutionContext;

      if (executionContext === NoContext) {
        // Flush the immediate callbacks that were scheduled during this batch
        flushSyncCallbackQueue();
      }
    }
  }

flushSyncCallbackQueue cause this bug

old: I give answer in here

in short, use chrome extension api "end process" current tab process and then reload, it means make force reload even when debug stuck