Publicando el ejemplo mínimo reproducible:

digamos que tengo una página web simple con área de texto, cada vez que hago clic en el botón se llama a la función handleUPClick .

Dentro de esa función, le he dado una suspensión de 2 segundos, aunque se respeta el texto establecido después de la suspensión, pero setText("Converting to Upper case..."); antes de que la función de suspensión no se respete.

Lo que estoy recibiendo actualmente:

 console.log("Uppercase was clicked " + text); As soon as button is clicked sleep of 2seconds setText(text.toUpperCase() ); the text should be converted

Lo que se esperaba:

 console.log("Uppercase was clicked " + text); As soon as button is clicked setText("Converting to Upper case..."); This should appear on screen sleep of 2seconds setText(text.toUpperCase() ); the text should be converted

Fragmento de código :

 import React, {useState} from 'react' export default function TextForm(props) { const handleUPClick = ()=>{ console.log("Uppercase was clicked " + text); setText("Converting to Upper case..."); function sleep(milliseconds) { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); } sleep(2000); setText(text.toUpperCase() ); } const handleOnChange = (event)=>{ console.log("Changed"); setText(event.target.value); } const [text, setText] = useState('Enter text here'); //text is a state variable whose initial value is given and setText will be used to set text for the text variable return ( <div> <h3>{props.heading}</h3> <div className="mb-3"> <textarea className="form-control" value={text} onChange={handleOnChange} id="myBox" rows="8"></textarea> </div> <button className="btn btn-primary" onClick={handleUPClick}>Convert to Uppercase</button> </div> ) }

EDITAR: podría haber 100 formas de lograr lo mismo, pero estoy interesado en saber por qué esto no funciona y no se respeta el ajuste de texto antes de dormir. ¿Está esto relacionado con algo interno de cómo funciona el motor JS? Si es así, ¿entonces qué y por qué?