Suman
Suman

Reputation: 359

Why we use async before function in react

Sometimes we use async before the function. I want to know why and what is the proper use of async.

async remove(id) {
    axios.delete('http://localhost:9022/users/delete/'+id)
      .then(res => {
        let updatedUsers = [...this.state.users].filter(i => i.id !== id);
        this.setState({users: updatedUsers});
      });
  }

& what is the meaning of this

Users.propTypes = {
  classes: PropTypes.object.isRequired,
};

Upvotes: 1

Views: 2683

Answers (1)

23k
23k

Reputation: 1399

An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Async functions basically allow us to have nicer syntax for anything that does an asynchronous operation (API call, DB query, timeout, etc...).

We you define a function as async, you gain access to the await keyword, which prevents you from having to deal with callback functions or promise chaining.

For example:

async function foo() {
    let example = await apiQuery();
    ...
}

If you didn't specify a function as async, you would have to do it this way.

function foo() {
    apiQuery().then((data) => console.log(data));
    ...
}

You can see the first example provides a more clear approach to dealing with async functions. Working with multiple async function calls can start to get messy without it.

As for your second question.

PropTypes are a way of telling other developers that your React component requires some external input (props) to work correctly. So in your case, the Users component requires a prop titled classes that is of the type Object

See more here - https://reactjs.org/docs/typechecking-with-proptypes.html

Upvotes: 1

Related Questions