diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 8733ec0c..70feceae 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -182,36 +182,16 @@ import {useFormStatus} from 'react-dom'; export default function UsernameForm() { const {pending, data} = useFormStatus(); - const [showSubmitted, setShowSubmitted] = useState(false); - const submittedUsername = useRef(null); - const timeoutId = useRef(null); - - useMemo(() => { - if (pending) { - submittedUsername.current = data?.get('username'); - if (timeoutId.current != null) { - clearTimeout(timeoutId.current); - } - - timeoutId.current = setTimeout(() => { - timeoutId.current = null; - setShowSubmitted(false); - }, 2000); - setShowSubmitted(true); - } - }, [pending, data]); - return ( - <> -
- +
+

Request a Username:

+ - {showSubmitted ? ( -

Submitted request for username: {submittedUsername.current}

- ) : null} - +
+

{data ? `Requesting ${data?.get("username")}...`: ''}

+
); } ``` @@ -219,10 +199,15 @@ export default function UsernameForm() { ```js src/App.js import UsernameForm from './UsernameForm'; import { submitForm } from "./actions.js"; +import {useRef} from 'react'; export default function App() { + const ref = useRef(null); return ( -
+ { + await submitForm(formData); + ref.current.reset(); + }}> ); @@ -231,8 +216,22 @@ export default function App() { ```js src/actions.js hidden export async function submitForm(query) { - await new Promise((res) => setTimeout(res, 1000)); + await new Promise((res) => setTimeout(res, 2000)); +} +``` + +```css +p { + height: 14px; + padding: 0; + margin: 2px 0 0 0 ; + font-size: 14px +} + +button { + margin-left: 2px; } + ``` ```json package.json hidden