title: Why does react render differently in these two cases when using redux?
body: <p>I was struggling with something I thought was a bug. I would be grateful if someone could explain why this happens.</p>
  <p>In one instance, the permissions component renders every time permissions are updated in the store.
  While in the second instance, the permissions component renders only once.</p>
  <p>This is my component tree:-</p>
  <ul>
  <li>Layout
  <ul>
  <li>Sidebar</li>
  <li>Components
  <ul>
  <li>Auth
  <ul>
  <li>Permissions</li>
  <li>Roles</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p><strong>Permissions Component</strong></p>
  <pre><code>import * as React from &quot;react&quot;;
  import { useEffect } from &quot;react&quot;;
  import { useSelector } from &quot;react-redux&quot;;
  import { RouteComponentProps } from &quot;react-router-dom&quot;;
  import { fetchPermissions, launchModal } from &quot;../store/dispatcher&quot;;
  import { Permission } from &quot;../store/types/auth&quot;;
  import { GlobalState } from &quot;../store/types/state&quot;;
  
  import Loading from &quot;../common/loading&quot;;
  
  interface Props extends RouteComponentProps {}
  
  const Permissions: React.FC&lt;Props&gt; = React.memo((props) =&gt; {
  
      const { loading, permissions } = useSelector((state: GlobalState) =&gt; ({
          loading: state.admin.permissionState?.isLoading,
          permissions: state.admin.permissionState?.permissions
      }));
  
      useEffect(() =&gt; {
          fetchPermissions();
      }, []);
  
      return (
          &lt;div className='card'&gt;
              &lt;div className='card-header'&gt;
                  &lt;div className='row'&gt;
                      &lt;div className='col-md-8'&gt;
                          &lt;h3&gt;User Permissions&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className='card-body'&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      )
  
  });
  
  export default Permissions;
  </code></pre>
  <p><strong>Case 1:-</strong></p>
  <p>In this case, every time permissions are updated to the store, the permissions component rerenders.</p>
  <pre><code>import * as React from &quot;react&quot;;
  import {Route, RouteComponentProps, Switch} from &quot;react-router-dom&quot;;
  import Loadable from &quot;react-loadable&quot;;
  
  import Loader from &quot;../common/Loader&quot;;
  
  interface Props extends RouteComponentProps {}
  
  const Auth: React.FC&lt;Props&gt; = React.memo((props) =&gt; {
  
      const Permissions = Loadable({
          loader: () =&gt; import('./permissions'),
          loading: Loader
      });
  
      const Roles = Loadable({
          loader: () =&gt; import('./roles'),
          loading: Loader
      });
  
      return (
          &lt;div&gt;
              &lt;Switch&gt;
                  &lt;Route path={`${props.match.url}/permissions`} render={(props) =&gt; &lt;Permissions {...props} /&gt;} /&gt;
                  &lt;Route path={`${props.match.url}/roles`} render={(props) =&gt; &lt;Roles {...props} /&gt;} /&gt;
              &lt;/Switch&gt;
          &lt;/div&gt;
      )
  
  });
  
  export default Auth;
  </code></pre>
  <p><strong>Case 2</strong></p>
  <p>This works as expected, the permissions component renders only ones.</p>
  <pre><code>import * as React from &quot;react&quot;;
  import {Route, RouteComponentProps, Switch} from &quot;react-router-dom&quot;;
  import Loadable from &quot;react-loadable&quot;;
  
  import Loader from &quot;../common/Loader&quot;;
  
  interface Props extends RouteComponentProps {}
  
  const Permissions = Loadable({
      loader: () =&gt; import('./permissions'),
      loading: Loader
  });
  
  const Roles = Loadable({
      loader: () =&gt; import('./roles'),
      loading: Loader
  });
  
  const Auth: React.FC&lt;Props&gt; = React.memo((props) =&gt; {
  
      return (
          &lt;div&gt;
              &lt;Switch&gt;
                  &lt;Route path={`${props.match.url}/permissions`} render={(props) =&gt; &lt;Permissions {...props} /&gt;} /&gt;
                  &lt;Route path={`${props.match.url}/roles`} render={(props) =&gt; &lt;Roles {...props} /&gt;} /&gt;
              &lt;/Switch&gt;
          &lt;/div&gt;
      )
  
  });
  
  export default Auth;
  </code></pre>