JS: React

Theory: Asynchronous processing

Full access to materials

Working with asynchronous code in React is not particularly remarkable compared to what we previously discussed in the Asynchronous Programming course. But it does not hurt to run through it again.

class Loader extends React.Component {
  constructor(props) {
    super(props);
    this.state = { url: null };
  }

  handleClick = async () => {
    const res = await axios.get('/images/random');
    this.setState({ url: res.data });
  }

  render() {
    const { url } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>Load Random Image</button>
        {url && <img src={url} />}
      </div>
    );
  }
}

As you can see above, we can easily make the handler asynchronous, and everything else will be okay.