title: Auto submits the form when the page is loaded using React Hook
body: <p><a href="https://i.stack.imgur.com/PpHgr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PpHgr.jpg" alt="Auto Submit Form Screencast by Chen Lay" /></a></p>
  <ol>
  <li>When the page being loaded, then I do want to <strong>increment by 1</strong> automatically.</li>
  <li>When the page fully loaded, then I do want to submit the form automatically <strong>without clicking the submit button</strong>.</li>
  </ol>
  <hr />
  <p><em><strong> The reason why I am doing this because I have plan to use with my own Cron Job. Thanks in advance.</strong></em></p>
  <h2>Please guide me through how do I handle it?</h2>
  <pre><code>import firebase from &quot;@config/firebase.config&quot;;
  import &quot;firebase/firestore&quot;;
  
  import { useState, useEffect, useRef } from &quot;react&quot;;
  
  // TODO: Main Form UI
  const FormData = ({ justDummy }) =&gt; {
    // TODO: FORM REF
    const formRef = useRef(null);
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
    };
  
    useEffect(() =&gt; {
      // * This didn't work!
      // formRef.current.submit()
    }, []);
  
    return (
      &lt;&gt;
        &lt;ScopedCssBaseline /&gt;
        &lt;form onSubmit={handleSubmit} ref={formRef} autoComplete=&quot;off&quot;&gt;
          &lt;form onSubmit={handleSubmit} ref={formRef} autoComplete=&quot;off&quot;&gt;
            &lt;Box sx={{ display: &quot;flex&quot;, mt: 3 }}&gt;
              &lt;TextField
                onChange={() =&gt; console.log(&quot;&quot;)}
                value={id}
                type=&quot;number&quot;
                placeholder=&quot;100&quot;
                variant=&quot;outlined&quot;
                fullWidth
                size=&quot;small&quot;
                required
                color=&quot;primary&quot;
                label=&quot;ID&quot;
                disabled
              /&gt;
              &lt;Box sx={{ mx: 0.5 }} /&gt;
              &lt;TextField
                onChange={() =&gt; console.log(&quot;&quot;)}
                value={currentDate}
                placeholder=&quot;Current Date&quot;
                variant=&quot;outlined&quot;
                fullWidth
                size=&quot;small&quot;
                color=&quot;primary&quot;
                label=&quot;Date&quot;
                disabled
              /&gt;
            &lt;/Box&gt;
            &lt;Box sx={{ mt: 1 }}&gt;
              &lt;Button
                type=&quot;submit&quot;
                fullWidth
                variant=&quot;outlined&quot;
                color=&quot;primary&quot;
                disabled
              &gt;
                Submit Data
              &lt;/Button&gt;
            &lt;/Box&gt;
          &lt;/form&gt;
        &lt;/form&gt;
      &lt;/&gt;
    );
  };
  
  export default FormData;
  </code></pre>