Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Duplicate Websocket connection only in dev mode

See original GitHub issue

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?


Which terms did you search for in User Guide?

useRef, websocket


Environment Info:

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

    OS: Linux 5.8 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-10710U CPU @ 1.10GHz
    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
    Chrome: Not Found
    Firefox: 84.0.2
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
    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 start

Expected behavior

One websocket connection is made to

Actual behavior

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

Screenshot from 2021-01-14 16-27-45

Reproducible demo

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

raffaelercommented, Jun 26, 2022

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-ecgrowcommented, Sep 9, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to prevent multiple socket connections and events in ...
1. Connect only once. In this way, you can ensure there will be only one socket instance.
Read more >
How WebSocket server handles multiple incoming ...
Server just accepts each of them and using separate TCP connections to serve them. In my oritinal question, I just have an impression...
Read more >
How to Avoid Multiple WebSocket Connections in a React ...
In this post, you'll learn how WebSocket connections work in a React Chat app and how to avoid concurrent connections with Stream's Chat ......
Read more >
Use effect with empty array triggers twice(opens two ...
I'm using useRef to store a Websocket connection i open on useEffect(with empty dependencies array [ ]), and clean with return () =>...
Read more >
Writing WebSocket servers - Web APIs | MDN
First, the server must listen for incoming socket connections using a standard TCP socket. Depending on your platform, this may be handled for ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found