title: Reset to Initial State with React Hooks
body: <p>I'm currently working on a signup form and the following is a snippet of my code:</p>
  
  <pre><code>const Signup = () =&gt; {
      const [username, setUsername] = useState('')
      const [email, setEmail] = useState('')
      const [password, setPassword] = useState('')
      const [passwordConfirmation, setPasswordConfirmation] = useState('')
  
      const clearState = () =&gt; {
          setUsername('')
          setEmail('')
          setPassword('')
          setPasswordConfirmation('')
      }
  
      const handleSubmit = signupUser =&gt; e =&gt; {
          e.preventDefault()
          signupUser().then(data =&gt; {
              console.log(data)
              clearState() // &lt;-----------
          })
      }
  
      return &lt;JSX /&gt;
  }
  
  export default Signup
  </code></pre>
  
  <p>Each piece of state is used for a controlled input for the form.</p>
  
  <p>Essentially what I want to do is after the user has successfully signed up, I want the state to go back to the initial state with the fields cleared.</p>
  
  <p>It's quite imperative to manually set each piece of state back to empty strings in<code>clearState</code> I was wondering if there is a method or function that comes with React that resets the state back to its initial values?</p>