title: React-Redux: Best Implementation for different display modes
body: <p>I am currently working on a React-Redux Dashboard WebApp. This Dashboard offers several levels of details. They are called: <code>display_modes</code> and have a value from 1 to 3. Mode 1 is with less details, and mode 3 is with more details. The <code>display_mode</code> is stored in the Redux store.</p>
  <p>My app also has several &quot;pages&quot; which are reachable through different routes. Each page has its own component. Let's say <code>Home</code> and <code>Profile</code>.</p>
  <p>According to the <code>display_mode</code>, the architecture of the components will be completely different. Thus, since I don't want to have so many conditions inside my component, I want to have a different component for each mode: <code>Home1</code> <code>Home2</code> and <code>Home3</code> (same for <code>Profile</code>).</p>
  <p>I would like to know which is the best way to do this? (in terms of code quality and performance).</p>
  <p>I thought of doing something like that:</p>
  <pre><code>const Home = ({ mode }) =&gt; {
      return (
          {mode == 1 &amp;&amp; &lt;Home1 /&gt;}
          {mode == 2 &amp;&amp; &lt;Home2 /&gt;}
          {mode == 3 &amp;&amp; &lt;Home3 /&gt;}
      );
  }
  </code></pre>
  <p>I also thought of doing it this way:</p>
  <pre><code>import store from &quot;./getStore&quot;;
  if(store.getState().mode === 1) module.exports = require('./Home1');
  if(store.getState().mode === 2) module.exports = require('./Home2');
  if(store.getState().mode === 3) module.exports = require('./Home3');
  </code></pre>
  <p>Where getStore exports the redux store and the HomeX files return the relevant component.</p>
  <p>I am actually scared that the first version would not be as good in terms of performance because it imports all of the components before rendering. What do you think?</p>
  <p>Thank you very much!</p>