title: React Hooks - Input loses focus when 1 character is typed in
body: <p>I'm playing with React Hooks - rewriting a form to use hook concepts. Everything works as expected except that once I type any 1 character into the input, the input loses focus.</p>
  
  <p>I guess there is a problem that the outside of the component doesn't know about the internal changes in the component, but how do I resolve this issue?</p>
  
  <p>Here is the useForm Hook:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from "react";
  
  export default function useForm(defaultState, label) {
    const [state, setState] = useState(defaultState);
  
    const FormComponent = () =&gt; (
      &lt;form&gt;
        &lt;label htmlFor={label}&gt;
          {label}
          &lt;input
            type="text"
            id={label}
            value={state}
            placeholder={label}
            onChange={e =&gt; setState(e.target.value)}
          /&gt;
        &lt;/label&gt;
      &lt;/form&gt;
    );
  
    return [state, FormComponent, setState];
  }
  </code></pre>
  
  <p>Here is the component that uses the Hook:</p>
  
  <pre class="lang-js prettyprint-override"><code>function App() {
    const [formValue, Form, setFormValue] = useForm("San Francisco, CA", "Location");
  
    return (
      &lt;Fragment&gt;
        &lt;h1&gt;{formValue}&lt;/h1&gt;
        &lt;Form /&gt;
      &lt;/Fragment&gt;
    );
  }
  </code></pre>