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?

The `handleUPClick` function is completely synchronous and enqueued state updates in React asynchronously and batch processed between render cycles. The second state update effectively overwrites the first, so you only see the second. By converting `handleUPClick` to an `async` function now the enqueued state updates are no longer batched. Note however that React is likely changing how state is updated in a near-future version. You can read about it in the React [blogs](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html). — Drew Reese, Oct 07 '21 at 06:31

score 2 · Accepted Answer · answered Oct 07 '21 at 05:16

2

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

answered Oct 07 '21 at 05:16

maxpsz

431
3
9

Well thanks for the answer, but can you tell me what's wrong with the previous code? Why I was not getting "Converting to Upper case..." – Himanshu Poddar Oct 07 '21 at 06:01
I think it has something to do with race conditions. setText() is an async function, but sleep() is not, so I guess sleep() is executed in first place, so it completely stop code execution. By the time it just updates to the text in uppercase, ignoring the converting text. However, I hope somebody can explain it deeper in a more technical way, as I am not 100% in knowledge of the grounds behind this behaviour. – maxpsz Oct 07 '21 at 06:34
`setText` is a completely synchronous function. It's not `async` nor does it return a Promise. See my comment above for explanation and why your answer works. – Drew Reese Oct 07 '21 at 06:35

JSX doesn't honor usestate function before sleep

1 Answers1