score:2

Accepted answer

will react update all 5 rows or just the row holding the object i modified?

it will only update the dom with what's been changed, however it will still iterate through all your items in your dataset array. the iteration as well as the reconciliation process itself would take time if there are that many items in your array.

so the problem here isn't really the implementation per se - it's a very common approach for small to medium sized arrays. however, if you indeed have large entries in your array, you may notice performance hits, in which case you might want to find a different implementation.


that said, i did find a minor error in your code:

you correctly create a copy of your array with this.state.dataset.slice(); however you are not creating a copy of the object that you are mutating. so essenatially you are mutating the state directly. so instead do:

// copy current state
let new_dataset = this.state.dataset.slice(); 

// copy the object
let obj = object.assign({}, new_dataset[5]);

// modify the copy
obj.paid = !obj.paid;

// replace the array item with the new object
new_dataset[5] = obj;

score:0

will react update all 5 rows or just the row holding the object i modified?

no it doesn't react render all the 5 rows again. rather react optimises on a number of things to not render the same changes again. one such thing is a key attribute. also react runs a diffing algorithm to render only the changes

score:2

will react update all 5 rows or just the row holding the object i modified?

it will update only what has been changed. that is the purpose of reconciliation; i am not sure why you were looking for ways to avoid it. however, in your case you should use keys.


Related Query

More Query from same tag