title: Why does this component re-render completely when changing a single item with a unique key?
body: <p>This is a reoccurring problem for me… Trying to figure out why an update to a single item in a component results in the entire component re-rendering. If I have a CSS fade in transition on the component, it fades in again when changing a child of the component.</p>
  
  <hr>
  
  <p>I have a list of items, each with a link. Clicking the link adds the item to the cart. I have it set up to put that item in a “loading” state until the cart action is successful.</p>
  
  <p>This used to work perfectly, but now it just re-renders the entire page, making it disappear for a second then reappear. I’m not entirely sure why.</p>
  
  <p>This is the code stripped down to its basic bits:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import autobind from 'class-autobind';
  
  import Responsive from 'components/Responsive';
  
  // Selectors
  import { createStructuredSelector } from 'reselect';
  import { selectCartLoading, selectCartMap, selectFavorites } from 'containers/App/selectors';
  import { selectPackages } from 'store/fonts/selectors';
  
  // Actions
  import { addToCart } from 'containers/App/actions';
  
  export class Packages extends React.Component {
    constructor() {
      super();
      autobind(this);
    }
  
    state = {
      loadingID: 0
    }
  
    componentWillReceiveProps(nextProps) {
      if (this.props.cartLoading === true &amp;&amp; nextProps.cartLoading === false) {
        this.setState({ loadingID: 0 });
      }
    }
  
    onAddToCart(e) {
      e.preventDefault();
      const { onAddToCart } = this.props;
      const id = e.currentTarget.dataset.package;
  
      const packageData = {
        type: 'package',
        id,
        quantity: 1
      };
  
      onAddToCart(packageData);
  
      this.setState({ loadingID: id });
    }
  
    render() {
      const { cartMapping, packages } = this.props;
  
      if (!packages) { return null; }
  
      return (
        &lt;Responsive&gt;
          &lt;div&gt;
            &lt;ul&gt;
              { packages.map((pack) =&gt; {
                const inCart = !!cartMapping[parseInt(pack.id, 10)];
                const isFavorited = !favorites ? false : !!find(favorites.favorites, (favorite) =&gt; parseInt(pack.id, 10) === favorite.items.id);
  
                return (
                  &lt;li key={ pack.id }&gt;
                    &lt;Icon iconName="heart" onClick={ (e) =&gt; this.onAddFavorite(e, pack) } /&gt;
                    &lt;span&gt;{ pack.name }&lt;/span&gt;
                    { inCart &amp;&amp; &lt;span&gt;In Cart&lt;/span&gt; }
                    { !inCart &amp;&amp; &lt;a data-package={ pack.id } href="/" onClick={ this.onAddToCart }&gt;Add to Cart&lt;/a&gt; }
                  &lt;/li&gt;
                );
              })}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/Responsive&gt;
      );
    }
  }
  
  Packages.propTypes = {
    cartLoading: PropTypes.bool,
    cartMapping: PropTypes.object,
    onAddToCart: PropTypes.func.isRequired,
    packages: PropTypes.array
  };
  
  Packages.defaultProps = {
    cartLoading: null,
    cartMapping: null,
    packages: null
  };
  
  const mapStateToProps = createStructuredSelector({
    cartLoading: selectCartLoading(),
    cartMapping: selectCartMap(),
    packages: selectPackages()
  });
  
  function mapDispatchToProps(dispatch) {
    return {
      onAddToCart: (data) =&gt; dispatch(addToCart(data)),
      dispatch
    };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Packages);
  </code></pre>
  
  <p>So why does clicking on <code>&lt;a data-package={ pack.id } href="/" onClick={ this.onAddToCart }&gt;Add to Cart&lt;/a&gt;</code> result in a complete component re-render?</p>