title: React SSR - Rendering a component following an async action
body: <p>React's component lifecycle goes hand in hand with the DOM, so when I'm trying to render on the server side following an async action I'm encountering issues.</p>
  
  <p>I have a component (let's call it the containing component) which is responsible for dynamically importing another component (let's call it the inner component) according to data passed in its props.</p>
  
  <p>Once the import promise is resolved, I'd like to render the inner component inside of the containing component.</p>
  
  <p>The problem is, I have no way of accessing the containing component's lifecycle.</p>
  
  <p>render() is only triggered once upon the construction of the containing component.</p>
  
  <p>Updating the component via forceUpdate() and setState() are not possible for the same reason componentDidMount() will never be called.</p>
  
  <p>How do I render a component following an async action on the server side when using server rendering?</p>
  
  <p>My code so far:</p>
  
  <pre><code>import React from 'react';
  
  export default class ComponentLoader extends React.Component&lt;{ component: string }, { component: any }&gt; {
  
      constructor(props) {
          super(props);
  
          this.state = {
              component: null
          }; //no-op
      }
  
      componentDidMount(): void {
          //never called
      }
  
      componentWillMount(): void {
          import('./' + this.props.component).then(module =&gt; {
              this.forceUpdate(); //no-op
              this.setState({ component: React.createElement(module.default) }); //no-op
          });
      }
  
      render() {
          //called only once during construction
          return this.state.component || null; //this.state won't be available, nor will it matter if I access component any other way since render() won't be called again once that component is resolved anyway.
      }
  
  }
  </code></pre>