React useEffect executes every time the state is updated

In my React component I have the following code (I'm gonna exclude the return statement because it's not relevant for this case):

const App = () => {
let webSocket = new WebSocket(WS_URL);
  const [image, setImage] = useState({});
  const [bannerName, setBannerName] = useState('');
  const [bannerId, setBannerId] = useState(0);
  useEffect(() => {
    webSocket.onopen = (evt) => {
      console.log('On open web socket: ', evt);
    }
    
    webSocket.onmessage = (evt) => {
      console.log('SERVER DATA: ', evt.data);
    }
    console.log('Ready state: ', webSocket.readyState);
  }, []);
const updateImage = (evt) => {
    setImage(evt.target.files[0]);
  }
  const updateBannerName = (evt) => {
    setBannerName(evt.target.value);
  }
const updateBannerID = (evt) => {
    setBannerId(Number(evt.target.value));
  }
}

As I understand, if I use the useEffect() hook with an empty dependency array, it should be executed just once (it should work like a componentDidMount when using class components).

The problem is that it's being executed every time I update the state properties. Does anyone know what am I missing here?

Thank you!

I do note that you create a new WebSocket every time the App component code runs (and that is every time you update a state variable for example). Do you really mean to do this?

Otherwise change your code so that the WebSocket is only created once.