async function still freezing UI

Question

I have a function called on a submit form

 async solve(e){
        
        const waiter = (args) => new Promise((resolve, reject) => {
            resolve(this.CalculateValues(args))
          })
        e.preventDefault();
        let V=this.state.fields;
        let B =await waiter(V);
            this.setState({
                BrokerFees:B,
                SolveState:"Solve",
            });
  
    }

as you can see in the code I have a function that returns Promise i am using await keyword inside async function still my UI freezes. Please let me know if I am doing something wrong

What does `this.CalculateValues` do? If it's a blocking operation then it's going to block the UI. Promises are not separate threads. — David, Aug 11 '21 at 13:46

score -2 · Answer 1 · answered Aug 11 '21 at 13:46

-2

I think you should use async here :

solve(e){
        
        const waiter = async (args) => new Promise((resolve, reject) => {
            resolve(this.CalculateValues(args))
          })
        e.preventDefault();
        let V=this.state.fields;
        let B =await waiter(V);
            this.setState({
                BrokerFees:B,
                SolveState:"Solve",
            });
  
    }

answered Aug 11 '21 at 13:46

Nokwiw

386
4
11

By doing this get a syntax error cannot use await keyword outside an async function I added async to solve too but still UI freezes – Faizan Younas Tanooli Aug 11 '21 at 13:49
2

@Mohcine Not at all. You are adding the `async` keyword for no reason. Not using `await` inside the function makes it useless. Also you removed the `async` keyword from the main function, which uses `await`, so it must be marked as `async`. This code will never even compile. – Jeremy Thille Aug 11 '21 at 14:03

async function still freezing UI

1 Answers1