Duplicate Websocket connection only in dev mode

Describe the bug

WebSockets created conditionally and set on a useRef connect twice. This only happens when the app is started in development mode with yarn start but not when the app is served in production from the files generated by yarn build.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

useRef, websocket

Environment

Environment Info:

  current version of create-react-app: 4.0.1
  running from /home/chetan/.npm/_npx/1695019/lib/node_modules/create-react-app

  System:
    OS: Linux 5.8 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-10710U CPU @ 1.10GHz
  Binaries:
    Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
    Yarn: 1.22.10 - ~/.npm-packages/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.20.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 84.0.2
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Tested on Chromium 87.0.4280.141 and Firefox 84.0.2 on Ubuntu 20.04.

Steps to reproduce

yarn
yarn start

Expected behavior

One websocket connection is made to echo.websocket.org.

Actual behavior

Two websocket connections are made to echo.websocket.org, which are visible in the “Network” tab in browser dev tools.

Reproducible demo

https://github.com/chetbox/react-dev-websocket-bug

[raffaeler]

This is bad because you can’t abort a websocket which is in readyState==CONNECTING. The component gets unmounted before the connection is fully established.

The unmount lambda then calls websocket.close() making the first connection always break. This triggers the healthcheck and retry policies in my app which makes the app behave differently.

Frankly I am very perplexed on how the useEffect+StrictMode do not take in account this scenario.

[mdodge-ecgrow]

Just spent hours debugging my websocket code. It worked fine in Chrome, but wasn’t working in Firefox. Finally figured out that it was creating a connection, closing that and creating a second one. Lots more googling landed me here. Since I’m not seeing another way around this, I am disabling Strict Mode for now. At least I’ll know in the future I can choose one or the other, not both at the same time.