title: React - elegant way to re-render just one child component?
body: <p>I'm working on a table component.  When I scroll left and right on the <code>&lt;tbody /&gt;</code> I want it to update the xOffset of just the <code>&lt;theader /&gt;</code> which is in a separate component I'll call <code>&lt;Header Component /&gt;</code>.  Here's the structure:</p>
  
  <pre><code>&lt;Parent Component &gt;
      &lt;Header Component /&gt;
      &lt;Very Expensive Body divs/&gt;
      &lt;Very Expensive Body divs/&gt;
      &lt;Very Expensive Body divs/&gt;
  &lt;/Parent Component &gt;
  </code></pre>
  
  <p>The scroll listener is on the parent component and the xOffset is part of the Parent Component's state.  When I scroll left and right, it also re-renders the very expensive to re-render body components.  </p>
  
  <p>What are my options for just the Header Component to re-render?</p>
  
  <p>1) Use Redux and selectors.  Parent component dispatches an xOffset to app state and the <code>&lt;Header Component /&gt;</code> listens just for that on a selector.  Seems like overkill...</p>
  
  <p>2) I break out all the <code>&lt;Very Expensive Body Comp divs &gt;</code> into their own component, and use ShouldComponentUpdate so that it doesn't re-render if everything stays the same besides xOffset.  This doesn't seem like overkill, but I feel like I'm going to be dealing with the same problem because I'll have to put the scroll listener on this new component... and then use the parent component as an intermediary.. oof. </p>
  
  <p>Is there a third more elegant solution?</p>
  
  <p>I'm hoping there's a way to pass a function into the <code>&lt;Header Component /&gt;</code> so that when the parent component scrolls left and right, it uses that function to update the state of the <code>&lt;Header Component /&gt;</code> which would cause just it to re-render.  </p>