title: React: Instantiate component once and use multiple times
body: <p>Is it possible to reuse React component twice, but instantiate it only once?</p>
  
  <p>Now I need to trigger timeout on ComponentDidMount, but I need to make only once having several components on the same page. So I thought, maybe it's possible to instantiate component and then pass it as an argument?</p>
  
  <p>For example, there's a component that runs timeout when render complete:</p>
  
  <pre><code>export default ComponentOne extends React.Component {
     componentDidMount = () =&gt; {
         setTimeout(() =&gt; (this.doSomeStuff()), 10 * 1000);
     }
  
     doSomeStuff = () =&gt; {
         // Do something, that can be done only once
     }
  }
  </code></pre>
  
  <p>So the component do some stuff that can be done only once. But on the page there are two components that appear depending on screen resolution (css media queries) in different places, like:</p>
  
  <pre><code>&lt;div class="page-start block-that-appears-for-desktop"&gt;
      &lt;ComponentOne /&gt;
  &lt;/div&gt;
  &lt;!-- ... --&gt;
  &lt;div class="page-end block-that-appears-for-mobile"&gt;
      &lt;ComponentOne /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So now I'll have componentDidMount() called twice and two timeouts, even if one of blocks is hidden.</p>