title: React and Socket.io | useState generates new socket connection onChange in input
body: <p>I'm using React and Socket.io but I have an issue. Each character I write in the input field, a new socket id is created and I do not want that to happen. When I remove the setUsername(e.target.value) in the onChange method no socket are created. Here is my code:</p>
  
  <p><strong>Server Side:</strong></p>
  
  <pre><code>const express = require('express'),
      app = express(),
      http = require('http').createServer(app),
      PORT = 5000,
      io = require('socket.io')(http);
  
  io.on('connection', (socket) =&gt; {
      console.log('New client with id: ' + socket.id);
  
      socket.on('disconnect', () =&gt; console.log('Disconnected'));
  });
  
  http.listen(PORT, (req, res) =&gt; console.log('Server has started on port: ' + PORT));
  </code></pre>
  
  <p><strong>Client Side:</strong></p>
  
  <pre><code>import React, { useEffect, useState } from 'react';
  import './App.css';
  import io from 'socket.io-client';
  import 'materialize-css/dist/css/materialize.min.css';
  import M from "materialize-css";
  
  function App() {
  
    const socket = io.connect('http://localhost:5000');
    const [username, setUsername] = useState('');
  
    useEffect(() =&gt; {
      M.AutoInit();
      //eslint-disable-next-line
    }, []);
  
    const handleSubmit = e =&gt; {
      e.preventDefault();
    };
  
    const onChange = e =&gt; {
      setUsername(e.target.value);
    }
  
    return (
      &lt;div&gt;
        &lt;form onClick={e =&gt; handleSubmit(e)}&gt;
          &lt;input id="name" placeholder="Username..." onChange={e =&gt; onChange(e)} required /&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/mh8wH.png" rel="nofollow noreferrer">Here is the output for each character I write (I typed 'username')</a></p>
  
  <p>Thank you in advance</p>