title: useSelector in child component re-rendering parent component
body: <p>I'm new to react and I'm getting to play with redux but I noticed every time my child component (the icon bag) changes the number of items in the bag the entire header component re renders. I have tried,</p>
  <ul>
  <li>useMemo</li>
  <li>createSelector</li>
  <li>React.memo(Header)</li>
  </ul>
  <p>Any suggestions?</p>
  <p><a href="https://i.stack.imgur.com/G3kdb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G3kdb.png" alt="enter image description here" /></a></p>
  <p><strong>HEADER COMPONENT</strong></p>
  <pre><code>const Header = ({ currentUser }) =&gt; {
      const { hidden } = useSelector(state =&gt; state.cart);
  
      return (
          &lt;div className=&quot;header&quot;&gt;
              ...
              &lt;div className=&quot;options&quot;&gt;
                  ...
                  &lt;CartIcon /&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;);
  };
  
  export default Header;
  </code></pre>
  <p><strong>CART ICON COMPONENT</strong></p>
  <pre><code>const CartIcon = () =&gt; {
      const selectCartItems = createSelector(
          state =&gt; state.cart,
          cart =&gt; cart.cartItems
      );
      const cartItems = useSelector(selectCartItems);
      const dispatch = useDispatch();
  
      const totalItemsCount = (cartItems) =&gt; {
          return cartItems.reduce((acc, crr) =&gt;
              acc + crr.quantity
              , 0)
      };
      const totalItems = useMemo(() =&gt; totalItemsCount(cartItems), [cartItems])
  
      return (
          &lt;div className=&quot;cart-icon&quot; onClick={(() =&gt; dispatch(actionCreators.onToggleCart()))}&gt;
              &lt;ShoppingIcon className=&quot;shopping-icon&quot; /&gt;
              &lt;span className=&quot;item-count&quot;&gt;{totalItems}&lt;/span&gt;
          &lt;/div&gt;
      );
  };
  
  export default CartIcon;
  </code></pre>