Loading async data into React component

Question

I need to asynchronously load external data into my React component. The documentation here provides the following code example.

// After
class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  componentDidMount() {
    this._asyncRequest = loadMyAsyncData().then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}

But what might loadMyAsyncData() look like to make it "thenable?" I would imagine it might use async/await?

Can someone provide an example?

It would just be a function that returns a promise, and inside the promise you have an API call that resolves/rejects the promise based on the API response. — Jayce444
– Jayce444, Commented Mar 10, 2019 at 23:10

Teneff · Accepted Answer · 2019-03-10 23:33:26Z

3

To be "thenable loadMyAsyncData should return a Promise.

Here's an example loadMyAsyncData returning a promise and using setTimeout to delay resolving the promise after 1 second

const loadMyAsyncData = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve({
    example: "value"
  }), 1000)
})

you can use the code above this._asyncRequest = loadMyAsyncData().then( ..... ) or use async/await instead

async componentDidMount() {
  this._asyncRequest = loadMyAsyncData()
  const externalData = await this._asyncRequest;
  this._asyncRequest = null;
  this.setState({externalData});
}

codesandbox example

edited Mar 10, 2019 at 23:33

answered Mar 10, 2019 at 23:20

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Let Me Tink About It Over a year ago

Thanks. +1. I really appreciate the codesandbox example. Quick question. Is there any way to use async/await to define loadMyAsyncData() or does it have to use the new Promise() syntax?

Teneff Over a year ago

@Mowzer it depends on the implementation, but in this case we need use new Promise()

Let Me Tink About It Over a year ago

Is that because it needs to return a promise? And async/await does not return a promise?

Collectives™ on Stack Overflow

Loading async data into React component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related