title: React Hook Form: Making append() Asynchronous
body: <p>React Hook Forms provides a method <code>append()</code> on <code>useFieldArray</code> to add more rows to the dynamic fields array.</p>
  <p>I'm able to use <code>append()</code>. However, I want to execute another function immediately after calling <code>append()</code>. But that's not happening. Instead, the next function gets called before <code>append()</code> is completed.</p>
  <p>How can I change this behavour and ensure that the next function will be called only after append() is completed?</p>
  <p><a href="https://react-hook-form.com/api/usefieldarray" rel="nofollow noreferrer">https://react-hook-form.com/api/usefieldarray</a></p>
  <p>In the following example:</p>
  <pre><code>onClick={() =&gt; {
                      console.log('fields 1', fields)
                      append({
                        item: 
                          {
                            id: 1, 
                            name: 'test'
                          }
                      });
                      console.log('fields 2', fields)
  
                      }}&gt;
  </code></pre>
  <p>In the above example, the length of fields remains the same. It doesn't increase. How do I resolve this?</p>