Bug: Chrome devtools conflict while watching WebSocket in a React page

[ch1ny]

Well, this might be a strange question, but there are some differences about the behavior of iframes between a native h5 page and a React page.

• Native h5 Page

  Here is a native h5 page with an iFrame. The iframe will create a WebSocket connection. We can see the value of Time is Pending while the connection is still active.

  

  Then after I removed this iframe as a child from document, the value of Time became the time the connection lasted.

  

However, in a React Page, something strange happens.

• React Page

  Every added iframe would create a WebSocket connection in Pending status.

  

  But when I remove them, the value of Time wouldn't change into the time they lasted, but still in Pending status.

  

  Here is my code:

  function App() {
  const [frames, setFrames] = useState([]);
  
  const onAdd = useCallback(() => {
  const iFrame = (
    <iframe src='http://127.0.0.1:8080/iframe.html' />
  );
  
  setFrames((frames) => [
    ...frames,
    iFrame,
  ]);
  }, []);
  
  const onDel = useCallback(() => {
  setFrames((frames) => [
    ...frames.slice(0, frames.length - 1),
  ]);
  }, []);
  
  return (
  <div className="App">
    <div>
      <button onClick={onAdd}>+1</button>
      <button onClick={onDel}>-1</button>
    </div>
    <div>
      {
        frames.map((frame, index) => {
          return (
            <React.Fragment key={index}>
              {frame}
            </React.Fragment>
          )
        })
      }
    </div>
  </div>
  );
  }

I tried to make some logs in my WebSocket Server, and it seemed that the connections have been disconnected already.

I'm a freshman in frontend development, so this is a strange behavior as for me. I wonder if this caused by memory leak or something else.

Sincerely waiting for your answer.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!