Accepted answer

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.


If I understand correctly, one option is to do something like:

<Parent Component >
    <Header Component />
    { this.getVeryExpensiveBodyDivs() }
</Parent Component >

And have getVeryExpensiveBodyDivs generate and cache the divs the first time and then just access them from the cache afterward if they're in the cache. The cache would just be an instance variable (this.cachedVeryExpensiveBodyDivs).

Then, in your table component's componentWillReceiveProps, you can check if any props are changing that should affect the very expensive body divs. If the prop changes should affect the very expensive body divs, clear the cache. The next time getVeryExpensiveBodyDivs is called it will regenerate and recache the divs.

Related Query

More Query from same tag