JSX doesn't honor usestate function before sleep

Question

Posting the minimal reproducible example :

say I have a simple web page with text area, whenever I click on button the function handleUPClick is called.

Inside that function I have given a sleep of 2seconds, although the settext after sleep is honored but setText("Converting to Upper case..."); before the sleep function is not getting honored.

What I am getting currently :

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

What was expected :

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

Code snippet :

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>
    )
}

EDIT : There could be 100 ways to achieve the same, but I am interested in knowing why this is not working and settext before sleep is not getting honored? Is this related to something internal to how JS engine works? If yes then what and why?

Answer 1

Try refactoring the handleUPClick function like this:

const handleUPClick = async () => {
    console.log("Uppercase was clicked " + text);
    setText("Converting to Upper case...");

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    await sleep(2000);

    setText(text.toUpperCase());
};