Skip to content

Commit a853e69

Browse files
authored
Remove useMemo from useFormStatus example (#6658)
* Remove useMemo from useFormStatus example * nits
1 parent 2ad51d9 commit a853e69

File tree

1 file changed

+28
-29
lines changed

1 file changed

+28
-29
lines changed

src/content/reference/react-dom/hooks/useFormStatus.md

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -182,47 +182,32 @@ import {useFormStatus} from 'react-dom';
182182
export default function UsernameForm() {
183183
const {pending, data} = useFormStatus();
184184

185-
const [showSubmitted, setShowSubmitted] = useState(false);
186-
const submittedUsername = useRef(null);
187-
const timeoutId = useRef(null);
188-
189-
useMemo(() => {
190-
if (pending) {
191-
submittedUsername.current = data?.get('username');
192-
if (timeoutId.current != null) {
193-
clearTimeout(timeoutId.current);
194-
}
195-
196-
timeoutId.current = setTimeout(() => {
197-
timeoutId.current = null;
198-
setShowSubmitted(false);
199-
}, 2000);
200-
setShowSubmitted(true);
201-
}
202-
}, [pending, data]);
203-
204185
return (
205-
<>
206-
<label>Request a Username: </label><br />
207-
<input type="text" name="username" />
186+
<div>
187+
<h3>Request a Username: </h3>
188+
<input type="text" name="username" disabled={pending}/>
208189
<button type="submit" disabled={pending}>
209-
{pending ? 'Submitting...' : 'Submit'}
190+
Submit
210191
</button>
211-
{showSubmitted ? (
212-
<p>Submitted request for username: {submittedUsername.current}</p>
213-
) : null}
214-
</>
192+
<br />
193+
<p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
194+
</div>
215195
);
216196
}
217197
```
218198
219199
```js src/App.js
220200
import UsernameForm from './UsernameForm';
221201
import { submitForm } from "./actions.js";
202+
import {useRef} from 'react';
222203
223204
export default function App() {
205+
const ref = useRef(null);
224206
return (
225-
<form action={submitForm}>
207+
<form ref={ref} action={async (formData) => {
208+
await submitForm(formData);
209+
ref.current.reset();
210+
}}>
226211
<UsernameForm />
227212
</form>
228213
);
@@ -231,8 +216,22 @@ export default function App() {
231216
232217
```js src/actions.js hidden
233218
export async function submitForm(query) {
234-
await new Promise((res) => setTimeout(res, 1000));
219+
await new Promise((res) => setTimeout(res, 2000));
220+
}
221+
```
222+
223+
```css
224+
p {
225+
height: 14px;
226+
padding: 0;
227+
margin: 2px 0 0 0 ;
228+
font-size: 14px
229+
}
230+
231+
button {
232+
margin-left: 2px;
235233
}
234+
236235
```
237236
238237
```json package.json hidden

0 commit comments

Comments
 (0)