Remove useMemo from useFormStatus example

[rickhanlonii]

Overview

The useMemo here breaks the rules of React, is unnecessary and makes a worse experience:

• Breaks the rules of React: setting a timer in memo, setting state, and reading/writing to refs are all side effects in render, which is unsafe. useMemo must be a pure function with no side effects.
• Unnecessary: the formData is automatically updated as state, so there's no need to store it in a ref ref, you can just read it. The showSubmitted state is also unnecessary since the pending state already tells you if it's being submitted.
• Worse experience: by using a timer, there is an extra state update to show the submitted state (causing a multi-pass render update), and there is an artificial delay between when the form submission completes and when the "Submitted request" text dismisses. By using the pending and formData values directly, the "Submitted request` text is tied directly to the form submission transition "pending" state, so the disabled state and the text update in the same commit.

Additional improvements

I also made a couple more improvements:

• CSS to space things out
• Reset the form after submission
• Increase form submission time to 2 seconds
• Disable the input on submit

Before

Screen.Recording.2024-02-23.at.11.50.59.AM.mov

After

Screen.Recording.2024-02-23.at.11.51.44.AM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-dev	✅ Ready (Inspect)	Visit Preview	Feb 24, 2024 3:33pm

[github-actions]

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[lunaleaps]

I think I added this example and I don't recall why I didn't disable the input while submitting -- is there a reason why we changed that?

[sophiebits]

ty

[acdlite]

Nit

Suggested change

	<p>{pending ? `Requesting ${data?.get("username")}...`: ''}</p>
	<p>{data ? `Requesting ${data.get("username")}...`: ''}</p>

[rickhanlonii]

Makes sense - out of curiosity, are pending and data always in sync?

[rickhanlonii]

@lunaleaps if you don't disable the input, then the user can continue typing but when the action finishes the reset will blow away their changes, which is sucky

Screen.Recording.2024-02-24.at.10.34.28.AM.mov