title: How can a parent component subscribe to child component's "formState.isDirty" in react-hook-form v6?
body: <p>My user case is that if an end user wants to move away from a particular screen, and if there are unsaved changes in this screen, then the app would warn user.</p>
  <p>Now my child component (this particular screen to check dirty) is a form built on top of react-hook-form v6, which provides &quot;formState.isDirty&quot;. My parent component is sitting on top of &quot;react-router&quot; to route to appropriate screens</p>
  <p>One thing I tried is that in my parent component, take advantage of useState hook and pass callback to child:</p>
  <p><code>const [userDirty, setDirty] = useState(undefined)</code></p>
  <p>Then in my child component, I have this:</p>
  <pre><code>const methods = useForm() 
  useEffect(() =&gt; {
      setDirty(methods.formState.isDirty)
  }, )
  </code></pre>
  <p>It works only when end user-interaction-with-child-form has caused a re-render. But there are times end user made a change to the form and no re-render, then above code would not work since &quot;useEffect&quot; only runs at each re-render.
  Here is an example when it does not work -- end user edits a text input:</p>
  <pre><code>&lt;Form.Control  type=&quot;text&quot;  name=&quot;customDisplayName&quot;
                          defaultValue={xxx}
                          ref={register}  
  &gt;
  </code></pre>
  <p>I understand that one approach is to add an &quot;onChange&quot; handler to each input in my child component, and then &quot;setDirty&quot; there. But it is a complex form, which has many children input.</p>
  <pre><code>    &lt;Form.Control  type=&quot;text&quot;  name=&quot;customDisplayName&quot;
                          defaultValue={xxx}
                          ref={register}  
                           onChange={()=&gt;{
                            setDirty(true)
                          }}
  &gt;
  </code></pre>
  <p>Is there a simple way to accomplish this?</p>