How to prevent content jumping/scrolling in Angular 5 with NGRX

Question

Let's say I have a long page with a table (or to be correct with a set of containers that contain tables) and there is a lot of data in these tables, so that it doesn't fit into a screen and therefore it is possible to scroll the page with scrollbars.

Now I have a checkbox in each row of the table so that I can select some rows and perform some actions with them.

These checkboxes are tied to the state so that when I check one of them, the state gets updated and entire page gets re-rendered. If I understand correctly, this leads to unexpected content scrolling (jumping).

So my question is: is there any common approach to avoid this unexpected behavior? I'm thinking of separating user interactions into a separate state, but it feels like a reinventing the wheel a bit. Any other ideas or standard approaches?

Answer 1

@Simon_Weaver, @user2216584 your comments were correct: just need to add trackBy to prevent Angular from redrawing containers