title: Execute code in React children after parent componentDidMount
body: <p>I'm using axios for web requests and have created an interceptor for it to show a toaster for all error messages.</p>
  
  <p>I'm using react-intl for translations and the generic error message present in the interceptor is translated, so I'm tying the interceptor to my application's lifecycle:</p>
  
  <pre><code>class Main extends React.Component {
    componentDidMount () {
  
      // addToastInterceptor calls back for a message that can be evaluated dynamically
      // otherwise it uses axios.interceptors.response.use(...)
      this.interceptor = addToastInterceptor((e) =&gt;
        this.props.intl.formatMessage({
          id: 'applicationForm.basic.errorMessage'
        }, {
          technicalMessage: e.message
        }));
    }
  
    componentWillUnmount () {
      // the interceptor handle is removed when the component unmounts
      removeToastInterceptor(this.interceptor);
    }
  
    render() {
      // any number of child component in any depth
    }
  }
  
  // The intl provider must exist in a wrapper component
  export default injectIntl(Main);
  </code></pre>
  
  <p>This way while the <code>Main</code> component is mounted, any axios call that receives an error response will trigger a toast message.</p>
  
  <p>My problem is the following. If I try to make a call with axios before <code>Main.componentDidMount</code> is called the message will not show up.</p>
  
  <p>If I make a call in a descendant component's <code>componentDidMount</code>, it will not show the message:</p>
  
  <pre><code>// This component dispatches a redux call that uses axios.get internally
  class SomeChild extends React.Component {
    componentDidMount () {
      // this is 
      this.props.getCountriesAction();
    }
  }
  
  const mapStateToProps = state =&gt; ({
    countries: state.boarding.countries,
  });
  
  const mapDispatchToProps = dispatch =&gt; bindActionCreators({
    getCountriesAction: getCountries,
  }, dispatch);
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps,
  )(SomeChild);
  </code></pre>
  
  <p>One workaround would be to use the constructor (or componentWillMoount) of Main to register the interceptor, but this would not hold up with async rendering because these methods are not guaranteed to run only once.</p>
  
  <p>Can I somehow change the order of the 2 <code>componentDidMount</code> calls or use any other lifecycle methods for this?</p>