Skip to content

Commit

Permalink
Remove useMemo from useFormStatus example (#6658)
Browse files Browse the repository at this point in the history
* Remove useMemo from useFormStatus example

* nits
  • Loading branch information
rickhanlonii authored Feb 24, 2024
1 parent 2ad51d9 commit a853e69
Showing 1 changed file with 28 additions and 29 deletions.
57 changes: 28 additions & 29 deletions src/content/reference/react-dom/hooks/useFormStatus.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,47 +182,32 @@ 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 (
<>
<label>Request a Username: </label><br />
<input type="text" name="username" />
<div>
<h3>Request a Username: </h3>
<input type="text" name="username" disabled={pending}/>
<button type="submit" disabled={pending}>
{pending ? 'Submitting...' : 'Submit'}
Submit
</button>
{showSubmitted ? (
<p>Submitted request for username: {submittedUsername.current}</p>
) : null}
</>
<br />
<p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
</div>
);
}
```
```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 (
<form action={submitForm}>
<form ref={ref} action={async (formData) => {
await submitForm(formData);
ref.current.reset();
}}>
<UsernameForm />
</form>
);
Expand All @@ -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
Expand Down

0 comments on commit a853e69

Please sign in to comment.