title: React - Form keeps re-rendering component while I type
body: <p>This function renders a modal that shows a login form. As I type, the whole component is re-rendering, and I can only type 1 or 2 letters before it resets. I've never seen this kind of problem before.</p>
  <p>I've tried factoring out the &quot;opts&quot; object, in case that was forcing the re-render. It did not change anything.</p>
  <pre class="lang-js prettyprint-override"><code>import React, {useState} from 'react';
  import useApi, {IPayload} from './hooks/useApi';
  import Modal from 'react-modal'
  import './modal.css';
  Modal.setAppElement('#root')
  
  interface IProps {
    payload:IPayload|null,
    closeAction?:()=&gt;void,
  }
  
  const defaultProps:IProps = {
    payload:null,
    closeAction: ()=&gt;null,
  }
  
  function Auth(props:IProps):JSX.Element{
  
    const [auth, updateAuth] = useState&lt;boolean&gt;(false)
    const [authModalIsOpen, setAuthModal] = useState(true)
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
  
    const opts = {
      username: username,
      password: password,
      fail: forceLogin,
    }
  
    const defaultPayload:IPayload = {
        path:'notes/validateAuth/',
        method: 'GET',
        body: null,
        callback: loginAction
    }
  
    const [payload, setPayload] = useState(defaultPayload)
    if(props.payload!==null){
  
      setPayload(props.payload)
    }
    // console.log(_payload)
    // useApi(opts, payload)
  
    function forceLogin(){
      setAuthModal(true)
      updateAuth(false)
    }
  
    function closeAuthModal(){
      if(auth){ setAuthModal(false) }
    }
  
  
    function SubmitLogin(){
      setPayload(defaultPayload)
    }
  
    function loginAction(res:any){
      updateAuth(true)
      setAuthModal(false)
      setUsername(res.auth)
    }
  
    function LoginWindow(){
      return(
        &lt;Modal
          isOpen={authModalIsOpen}
          onRequestClose={closeAuthModal}
          className='SearchModal'
          overlayClassName='SearchOverlay'
          &gt;
          &lt;div className=&quot;IoLinks_wrapper&quot;&gt;
          &lt;div className=&quot;IoLinks_incoming&quot;&gt;
          
          &lt;form onSubmit={(e)=&gt;{
            e.preventDefault()
            SubmitLogin()
          }}&gt;
              &lt;input name='username' className='greenput_narrow' onChange={(e)=&gt;{
                setUsername(e.target.value)
              }}/&gt;&lt;br /&gt;
              &lt;input type=&quot;password&quot; name='password' className='greenput_narrow' onChange={(e)=&gt;{
                setPassword(e.target.value)
              }}/&gt;&lt;br /&gt;
              &lt;button className='greenput_narrow' type=&quot;submit&quot;&gt;Login&lt;/button&gt;
            &lt;/form&gt;
          
          &lt;/div&gt;
          &lt;div className=&quot;IoLinks_outgoing&quot;&gt;&lt;h1&gt;NullDisk&lt;/h1&gt;&lt;ul&gt;&lt;li&gt;Military Grade Encryption&lt;/li&gt;&lt;li&gt;Zettelkasten Schema&lt;/li&gt;&lt;li&gt;VIM Keybindings&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/Modal&gt;
      )
    }
  
    return(
      &lt;LoginWindow/&gt;
    )
  }
  
  Auth.defaultProps = defaultProps
  export default Auth;
  </code></pre>
  <p>How do I fix this?</p>