AsyncRenderCallBackComponent.js

import React, { Component } from 'react';
import fetch from 'unfetch'

class FetchAsync extends Component {
  constructor(props) {
    super(props);
    this.state = { isFetching: false };
  }
  
  async fetch = () => {
    this.setState(() => { isFetching: true });
    
    try {
      const result = await fetch(this.props.uri, this.props.params);
      this.props.onFetched(result);
    } catch (err) {
      this.props.onError(err);
    }

    this.setState(() => { isFetching: false });
  }

  render = () => this.props.render(this.state.isFetching);
}

SampleAsyncComponent.js

import React, { Component } from 'react';
import fetch from 'unfetch'

class FetchAsync extends Component {
  constructor(props) {
    super(props);
    this.state = { isFetching: false };
  }

  async fetch = () => {
    this.setState(() => { isFetching: true });
    
    try {
      const result = await fetch(this.props.uri, this.props.params);
      this.props.onFetched(result);
    } catch (err) {
      this.props.onError(err);
    }

    this.setState(() => { isFetching: false });
  }

  render = () => this.state.isFetching 
    ? this.props.loadingChildren 
    : this.props.children; 
}