Un formulario tiene múltiples entradas, por lo que en lugar de tener una función setState para cada entrada, solo hay una que maneja todos los eventos. Intenté usar async/await, pero no pude hacerlo funcionar.
const [values, setValues] = useState({ username: undefined, password: undefined, confirmPassword: undefined, }); //this should be synchronous const onChange = (e) => { setValues({...values, [e.target.name]: e.target.value}); }Puede usar flushSync ( https://reactjs.org/docs/react-dom.html#flushsync ) para "vaciar cualquier actualización dentro de la devolución de llamada proporcionada de forma sincrónica".
// Force this state update to be synchronous. flushSync(() => { setValues({...values, [e.target.name]: e.target.value}); });Sospecho que su problema se resuelve utilizando la forma de función de setState, por lo que no hay un cierre obsoleto para values .
const onChange = (e) => { setValues(values => ({...values, [e.target.name]: e.target.value})) ; }