title: React-js Fetch api being called multiple times during Login
body: <p>I am new to the React world, and usage of components, I have an underlying issue where I have a Login Component that I call from <code>App.js</code> render(). </p>
  
  <p>The <code>Login.js</code> is having a <code>fetch()</code> api, which is used to fetch the response of whatever is typed on the <code>form</code>. </p>
  
  <p><strong>Expected Result</strong> - One time call to the <code>fetch</code> api, when I click the <code>submit</code> button within the form and then Login. </p>
  
  <p><strong>Actual Result</strong> - <code>fetch</code> api is getting called multiple times, when I am filling the form, rite from the point I start typing on the form, The complete result succeeds after I complete typing the <code>username</code> and <code>password</code> and the <code>submit</code> button does not seem to have any affect as such. </p>
  
  <p>Relevant Code About what I am taking about above :</p>
  
  <p>The <code>useform.js</code> that you see below is the hooks that I am using.</p>
  
  <p><code>App.js</code> </p>
  
  <pre><code>import React, {Component} from 'react'
  import './App.css'
  import Header from './components/Header.js'
  import Login from './components/Login.js'
  
  class App extends Component {
    render() {                                                                                                                                                             
        return (
        &lt;div className="container"&gt;
         &lt;Login /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><code>Login.js</code></p>
  
  <pre><code>import React  from "react"
  import Form from 'react-bootstrap/Form'
  import Button from 'react-bootstrap/Button'
  import Col from 'react-bootstrap/Col'
  import useForm from './useForm.js'
  // Using hooks instead of a Class and constructor
  
  
  const Login = () =&gt; {
      const { values, handleChange, handleSubmit } = useForm(signup)
  
      function signup(){
          console.log(values)
      }
  
      var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
          targetUrl = '...'
  
      fetch ( proxyUrl+targetUrl, {
              method: 'POST',
              headers: {
                  'content-Type': 'application/json',
                  'Accept' : 'application/json',
              },
          body: JSON.stringify(values)
      })
      .then((response) =&gt; response.json())
      .then((values) =&gt; {
          console.log('Success:', values)
      })
      .catch((error) =&gt; {
          console.error('Error:', error)
      })
  
  
      return (
  &lt;Form noValidate onSubmit={handleSubmit}&gt;
      &lt;Form.Row&gt;
          &lt;Form.Group as={Col} controlId="formGridUserName"&gt;
              &lt;Form.Label&gt;UserName&lt;/Form.Label&gt;
              &lt;Form.Control
                  autoFocus
                  name={'username'}
                  value={values.username}
                  type='username'
                  placeholder="username"
                  onChange={handleChange}
              /&gt;
          &lt;/Form.Group&gt;
  
          &lt;Form.Group as={Col} controlId="formGridFirstName"&gt;
              &lt;Form.Label&gt;First Name&lt;/Form.Label&gt;
              &lt;Form.Control
              autoFocus
              name={'firstname'}
              value={values.firstname}
              type='first name'
              placeholder="First name"
              onChange={handleChange}
              /&gt;
          &lt;/Form.Group&gt;
  
          &lt;Form.Group as={Col} controlId="formGridSecondName"&gt;
              &lt;Form.Label&gt;Last Name&lt;/Form.Label&gt;
              &lt;Form.Control
              autoFocus
              name={'lastname'}
              value={values.lastname}
              type='last name'
              placeholder="Last name"
              onChange={handleChange}
              /&gt;
          &lt;/Form.Group&gt;
      &lt;/Form.Row&gt;
  
      &lt;Form.Group controlId="formBasicEmail"&gt;
          &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
          &lt;Form.Control
          autoFocus
          type="email"
          name={'email'}
          value={values.email}
          onChange={handleChange}
          placeholder="Enter email"
          /&gt;
          &lt;Form.Text className="text-muted"&gt;
              We'll never share your email with anyone else.
          &lt;/Form.Text&gt;
    &lt;/Form.Group&gt;
  
    &lt;Form.Group controlId="formBasicPassword"&gt;
      &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
      &lt;Form.Control
          autoFocus
          type="password"
          name={'password'}
          value={values.password}
          onChange={handleChange}
          placeholder="Password" /&gt;
      &lt;/Form.Group&gt;
          &lt;Form.Group controlId="formBasicCheckbox"&gt;
              &lt;Form.Check type="checkbox" label="Check me out" /&gt;
      &lt;/Form.Group&gt;
  
      &lt;Button
          variant="primary"
          type="submit"
          value="Submit"
          &gt;
          Login
      &lt;/Button&gt;
  
  &lt;/Form&gt;
    );
  }
  
  export default Login
  </code></pre>
  
  <p>How do I run the react app, is as simple as <code>npm start</code> from within the <code>src</code> folder, my folder structure if you are curious about some particular file, that you would want to look at </p>
  
  <pre><code>planner-app/
  ├── README.md
  ├── node_modules
  ├── package-lock.json
  ├── package.json
  ├── public
  └── src
  
  planner-app/src
  ├── App.css
  ├── App.js
  ├── components
  │   ├── Header.js
  │   ├── Login.css
  │   ├── Login.js
  │   ├── MainComponent.js
  │   └── useForm.js
  ├── index.css
  ├── index.js
  ├── logo.svg
  ├── serviceWorker.js
  └── setupTests.js
  </code></pre>