title: How to set focus a ref using React-Hook-Form
body: <p>How do you implement set focus in an input using React-Hook-Form, this is what their FAQ's &quot;How to share ref usage&quot; code here <a href="https://www.react-hook-form.com/faqs/#Howtosharerefusage" rel="noreferrer">https://www.react-hook-form.com/faqs/#Howtosharerefusage</a></p>
  <pre><code>import React, { useRef } from &quot;react&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  export default function App() {
    const { register, handleSubmit } = useForm();
    const firstNameRef = useRef();
    const onSubmit = data =&gt; console.log(data);
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;input name=&quot;firstName&quot; ref={(e) =&gt; {
          register(e)
          firstNameRef.current = e // you can still assign to ref
        }} /&gt;
        &lt;input name=&quot;lastName&quot; ref={(e) =&gt; {
          // register's first argument is ref, and second is validation rules
          register(e, { required: true })
        }} /&gt;
  
        &lt;button&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    );
  }
  </code></pre>
  <p>I tried set focusing the ref inside useEffect but it doesn't work:</p>
  <pre><code>useEffect(()=&gt;{
     firstNameRef.current.focus();
  },[])
  </code></pre>
  <p>Neither does inside the input:</p>
  <pre><code>&lt;input name=&quot;firstName&quot; ref={(e) =&gt; {
      register(e)
      firstNameRef.current = e;
      e.focus();
  }} /&gt;
  </code></pre>