Hexlet logo

JS: React

Theory: Asynchronous processing

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.

Recommended programs

Navigation
Theory