import { useState } from 'react';
export default function Form() {
const [text, setText] = useState('');
function sleep(milliseconds) {
const start = Date.now();
while (Date.now() - start < milliseconds) {
}
}
async function handleSubmit(e) {
sleep(5000);
}
function handleTextareaChange(e) {
setText(e.target.value);
}
return (
<>
<h2>Test</h2>
<form onSubmit={handleSubmit}>
<textarea
value={text}
onChange={handleTextareaChange}
/>
<br />
<button>
Submit
</button>
</form>
</>
);
}
I edited this component from the react docs to make it to the point.
I was learning react and JavaScript and ran into async functions in the react docs.
Here when I submit the form I can not edit it until the sleep runs out, but my confusion is that the sleep(5000) was called inside an async function.
Calling functions inside async functions does not make them non-blocking?
Or, does the form also call await on the handleSubmit as well?
My knowledge on JavaScript and react is low, so I may not be using terms correctly.