An async higher order component that resolves a promise via props

withAsync.jsx

import { h, Component } from 'preact';

class AsyncComponent extends Component {

  constructor() {
    super();
    this.state = { loading: true };
    this.getAsyncState = this.getAsyncState.bind(this);
    this.update = this.update.bind(this);
  }

  getAsyncState() {
    let { promise, ...props } = this.props;
    this.setState({ loading: true, error: null });
    return promise(props);
  }

  update() {
    this.getAsyncState()
      .then(asyncState => this.setState({ loading: false, asyncState }))
      .catch(error => this.setState({ loading: false, error }));
  }

  componentWillMount() {
    let { initialState } = this.context;
    if(initialState) {
      this.state = { ...initialState };
    }
  }

  componentDidMount() {
    this.update();
  }

  componentDidUpdate(prevProps) {
    let queryRegex = /[?#]/;
    if(this.props.url.split(queryRegex)[0] !== prevProps.url.split(queryRegex)[0]) {
      this.update();
    }
  }

  render({ Component, promise, ...props }, { asyncState, ...state }) {
    return <Component { ...props } { ...asyncState } { ...state } />;
  }

}

export default function withAsync(Component, promise) {
  return function(props) {
    return <AsyncComponent Component={Component} promise={promise} {...props} />;
  };
}