title: Extremely slow React list render
body: <p>We are experiencing some frustrating issues with React.
  We have a form, consisting from a search form and a search result list.
  As seen below in the code. <code>filter</code> and <code>content</code>.</p>
  
  <p>Whenever the user types in the search field, there is a debounce and a call to a rest service.</p>
  
  <p>The result then populates the search result (content)</p>
  
  <p>Even with as little as 15 items in the list, this is insanely slow.
  it takes about 300 ms per update. 
  In production mode, there is no issue. only in dev mode.
  Also, removing propTypes makes it much faster but still slow.</p>
  
  <p>We can see that the <code>ContactSearchResultLayout</code> is being rendered 3 times per keystroke, while it really just should care about the result of the rest call.</p>
  
  <p>What are our best bets here?
  is the container component kind of pattern here wrong for our usecase, does it mean that if something in the SearchPageLayout props changes, the entire list will also be re-rendered?</p>
  
  <p>We have a version that pretty much bypass React and just render item by item as they come in from the service call. 
  Which is super fast, but on the other hand, much less maintainable.</p>
  
  <p>Is there some idiomatic way to make this work with React?</p>
  
  <pre><code>&lt;SearchPageLayout
    filter={
      &lt;ContactSearchForm
        allTeams={allTeams}
        allAreasOfExp={allAreasOfExp}
        allResponsiblePeople={allResponsiblePeople}
        allTags={allTags}
        detailed={props.searchFormExpanded}
        onSearchFieldBlur={() =&gt; props.setSearchFormExpanded(false)}
        onSearchFieldFocus={() =&gt; props.setSearchFormExpanded(true)}
      /&gt;
    }
    content={
      &lt;ContactSearchResultLayout       //&lt;-- this rerenders too often
        items={items.map(item =&gt; (
          &lt;ContactCard
            key={item.PersonId}
            areasOfExpertise={item.AreasOfExperise}
            cellPhone={item.CellPhone}
            city={item.City}
  </code></pre>
  
  <p>One reason for this as I see it, is that <code>items</code> is the result of a <code>map</code>  operation and thus, causes a new array of components to be generated.
  But how do we bypass this? </p>
  
  <p>Thoughts?</p>