React - elegant way to re-render just one child component?

Question

I'm working on a table component. When I scroll left and right on the <tbody /> I want it to update the xOffset of just the <theader /> which is in a separate component I'll call <Header Component />. Here's the structure:

<Parent Component >
    <Header Component />
    <Very Expensive Body divs/>
    <Very Expensive Body divs/>
    <Very Expensive Body divs/>
</Parent Component >

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.

What are my options for just the Header Component to re-render?

1) Use Redux and selectors. Parent component dispatches an xOffset to app state and the <Header Component /> listens just for that on a selector. Seems like overkill...

2) I break out all the <Very Expensive Body Comp divs > 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.

Is there a third more elegant solution?

I'm hoping there's a way to pass a function into the <Header Component /> so that when the parent component scrolls left and right, it uses that function to update the state of the <Header Component /> which would cause just it to re-render.

Answer 1

Option number 2! Break out your very expensive div tags into their own components and use shouldComponentUpdate. Keeping all elements inside one render() function does not scale well as you are beginning to see. The whole benefit of using React is that you can create simple, reusable components and build a more complex UI with those. You seem intent on keeping everything inside of one component, but that is essentially an anti-pattern in React.

However, do not add a new scroll listener to each component. Instead just keep it on the parent component like you are doing and pass the scroll value down as a prop to all of your new components. If they only need to change after a certain amount of the screen has been scrolled, you can update it in each child's shouldComponentUpdate function.