title: How to force render to wait for promise to finish?
body: <p>I am trying to pass the db reference through props, but I receive null in the Home component. If I disregard the promise and take off the await, everything works fine, except if the remote db is updated; then it takes two reloads to see the changes for obvious reasons.</p>
  
  <p>I am wondering how to force this promise to go through before the prop is sent to the Home component, or how to update the prop once the promise has gone through.</p>
  
  <pre><code>export default class App extends Component {
    state = {
      db: null,
    };
  
    componentDidMount() {
      this.setUpDB();
    }
  
    setUpDB = async () =&gt; {
      const remoteDB = PouchDB('http://localhost:5984/db_name');
      const localDB = PouchDB('db_name');
      await remoteDB.replicate.to(localDB);
      this.setState({
        db: localDB,
      });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;Navbar /&gt;
          &lt;Switch&gt;
            &lt;Route exact path='/' render={(props) =&gt; (
              &lt;Home
                db={this.state.db}
              /&gt;
            )}/&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>