I'm using Next.js 14 App Router, I noticed an issue with forms in which they can be submitted before page finishes loading. It occurs on both dev and production mode.

In other words, when I navigate to a page with a form, the form gets displayed before the page finishes rendering and during these few ms it can be submitted, it all happens before useEffect(() => { },[]); is called.

When the form is submitted the onSubmit is completely ignored and the page is refreshed with input fields content in the URL params.

Example:

export default function Home() {
  return (
    <form onSubmit={(e) => { e.preventDefault(); }}>
      <input name="email" type="text">
      <button type="submit">Submit</button>
    </form>
  );
}

I'm able to fix this issue by adding a useEffect to track when the page is loaded and enable the submit button, but this causes the page to be rendered twice.

export default function Home() {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    setLoaded(true);
  }, []);
  return (
    <form onSubmit={(e) => { e.preventDefault(); /* this is not working during render */ }}>
      <input name="email" type="text" onKeyDown={(e) => !loaded && e.key === "Enter" && e.preventDefault()} />
      <button type="submit" disabled={!loaded}>Submit</button>
    </form>
  );
}

It this a known issue in react/next.js forms?