I'm getting proper text from the method loadFIle. But when I try to set the state using setCodeToBeDsiplayed with the returned text, its not getting stored. It is giving empty string in the very next line.

const [CodeToBeDsiplayed, setCodeToBeDsiplayed] = useState("")

const [codeVersion, setCodeVersion] = useState(exampleCodeJava8);

 useEffect( () => {
        (async()=>{
            var text=await loadFile(exampleCodeJava8);
            setCodeToBeDsiplayed(text);
            setCodeVersion(CodeToBeDsiplayed);  
        })()
       
    }, [])

loadFile()

async function loadFile(url) {
        console.log("Dowloading file : " + url);

        return new Promise((resolve,reject)=>{
            var json;
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'text';
                xhr.onload =(event)=>{
                    json = xhr.response;
                    console.log("json : " + json);
                    resolve(json);
                };
                xhr.error=(error)=>{
                    reject(error);
                }
            xhr.open('GET', url);
            xhr.send();
        });

I'm getting proper text from the method loadFIle. But when I try to set the state using setCodeToBeDsiplayed with the returned text, its not getting stored. It is giving empty string in the very next line.

const [CodeToBeDsiplayed, setCodeToBeDsiplayed] = useState("")

const [codeVersion, setCodeVersion] = useState(exampleCodeJava8);

 useEffect( () => {
        (async()=>{
            var text=await loadFile(exampleCodeJava8);
            setCodeToBeDsiplayed(text);
            setCodeVersion(CodeToBeDsiplayed);  
        })()
       
    }, [])

loadFile()

async function loadFile(url) {
        console.log("Dowloading file : " + url);

        return new Promise((resolve,reject)=>{
            var json;
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'text';
                xhr.onload =(event)=>{
                    json = xhr.response;
                    console.log("json : " + json);
                    resolve(json);
                };
                xhr.error=(error)=>{
                    reject(error);
                }
            xhr.open('GET', url);
            xhr.send();
        });

• javascript
• reactjs
• react-native
• react-hooks

• of course the variable doesn't change value then and there, the setting of state only takes place on the next render. Just pass in text to setCodeVersion if that is what you need. – Robin Zigmond Commented Apr 24, 2021 at 17:23

3 Answers 3

useState is an async function and it also does not return a Promise. Using async/await or anything similar will not work. You need to use useEffect and add the dependency to invoke the other state to be set.

useEffect(() => { setCodeVersion(CodeToBeDsiplayed);}, [CodeToBeDsiplayed])

Michael Parker's answer here should explain where you're going wrong!

From React's documentation:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

Similarly, when using the useState hook, the updates don't take place immediately but are instead queued and a pending state transition is created.

In your case, you can just use - setCodeVersion(text) to set your state! Hope this helps!

you can't get new state value just after setting it as useState is also a asyc function you just have to pass the same text to setcodeversion as of setCodeToBeDsiplayed or you can write like this

const [CodeToBeDsiplayed, setCodeToBeDsiplayed] = useState("")
const [codeVersion, setCodeVersion] = useState(exampleCodeJava8);
useEffect( () => {
    (async()=>{
        var text=await loadFile(exampleCodeJava8);
        setCodeToBeDsiplayed(text=>{
             setCodeVersion(text);
             return text
         });
    })()
   
}, [])