The problem

One of our smallest guides, Equity Compensation, has more than 600 paragraphs and a user can bookmark, add a suggestion or highlight any of them, it is possible because each paragraph component instance is connected to redux and ready to receive updates.

But, connecting each paragraph to the redux drastically decreases page performance, every redux action would trigger 600+ connected components check roundtrips.

Advanced connect helps a bit, but still, there would be 600+ slightly faster roundtrips per store update, we don’t want that.

Virtual scrolling would help to reduce the number of paragraphs on a page, but it will require way more than dropping in a few listeners and render things as user scrolls due to unique features of the long-form text reading experience (it is not impossible, but way harder than it might look).

At first, we would need to define what’s efficient or cheap operation and what’s not. If we have a state that we never mutate, then a simple comparison of an old and new state would be pretty cheap ( === ), even a thousand of them would not make much difference, a modern browser needs only a fraction of millisecond for that.

We also know that it is better to have fewer components connected. What if we have a single container that checks for updates and re-renders list of paragraphs?

Unfortunately, that’s not efficient. While having fewer components connected, re-rendering long lists is not a fast operation.

If we decide to connect each paragraph component to the store, then the worst case is n redux roundtrips and one re-render. With a single container, it would be 1 connected component redux roundtrip and react would need to update a list of n elements.

So, it is better to have fewer components connected and fewer updates per store change, but it is ok to perform simple compare operation for each element.