How to avoid rerender of whole page most efficient?

1

I am designing a Meteor application. In one of the views I have a large grid which is populated from one Collection. Now the user is supposed to mark cells in this grid, choose a value for them, and then Save. (Just ignore the purpose of the application).

The problem I have, is that when the user hit “Save” then the document in the Collection is updated for the marked cell/cells. This changes the underlying Collection which in turn triggers a full rerender of the page since it is reactive upon it (and it should be). However, it is only one of the cells in the Collection that is actually modified so perhaps one should modify how the view is built up by creating a reactive variable for each cell and then setup observables for the collection. By doing that I could limit the change to a specific cell.

The underlying problem is that when the user hit Save, it takes some time before the Client actually detects that the collection has beed changed and the view is rerendered. In that time, the user might have marked some new cells and when the view is re-rendered that selection is gone. Ofcourse there are seperate ways to handle that concern.

But my question is if there are any best practices for designing this kind of view and limiting reactive scopes to avoid a full rerender? Are there any specific performance aspects that I should consider? I dont what the user to see the view flicker.

2

So are you using Blaze then?

React and Vue use a virtual DOM and some other checks to avoid rerendering things that don’t actually change.

I recommend using a ReactiveDict instead of ReactiveVar. Then you could load the entire document into the ReactiveDict, and Dicts only invalidate the specific field that was changed.

3

I forgot to mention that. But, yes, I am using Blaze.

Could you please elaborate on how you mean, load the entire document into the ReactiveDict?

Do you mean that I should create a ReactiveDict and insert each cell of the grid into the ReactiveDict and then setup observeChanges for the query and update the corresponding entry in the ReactiveDict on the callbacks?