DEV Community

Discussion on: 20 Killer JavaScript One-Liners That’ll Save You Hours of Coding 🤯🔥

 
marcelomartinez profile image
Marcelo Martínez

Talking about React, the other 999 elements won´t rerender because it keep track of them with a key and knows they haven´t changed.

Also, Reacts uses the Object.is(x, y) method to know when the state changed, and if you remove an array element using splice, React won´t rerender because it still is the reference to the same array even tho you modified it.

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

And for the Vanilla javascript?
Btw I use Event Propagation to remove Elements from DOM in Vanilla javascript

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

Also if we splice the state of useState and then update the state with the spliced version using setState, will it make a difference?

Thread Thread
 
devdufutur profile image
Rudy Nappée

Don't mutate your state in React !
stackoverflow.com/questions/551785...

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

Ohk thanks for this

 
devdufutur profile image
Rudy Nappée

What do you mean by rerender ?

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

Like once in a project i mapped the Array item with HTML UI using method,
Then delete element with button click using filter method, What it was doing is refreshing the entire list of HTML element, like there is a update Dom method which sets the innerHTML of the list with the updated array
So it was doing a heavy operation with that filter array approach
Then i used the Event Propagation and find the element using closest() method of DOM, when we click on delete button of an element, it will find the closest parent element which holds that delete button and other Things, and then deleting that parent element using remove() method

Thread Thread
 
devdufutur profile image
Rudy Nappée

Actually with React you shouldn't mutate your state. If your keys are consistent it will not rerender your other elements. With filter, the objects identities doesn't change, only the array identity (it returns a new array containing the same objects).