DEV Community

Discussion on: How to update an array state in React.Js

Collapse
 
jrishabh55 profile image
Rishabh Jain • Edited

Can you put more context here?,
if we are talking about Map data type, then that's a different process to handle it.
If it's about the map function in the Array prototype, i agree we get a new array in return but that is a relatively expensive operation.

For object assign, that's of objects only right?, We can apply them for arrays. I'm planning a follow up article for object state change as well.

Collapse
 
hgaleh profile image
Hojjat Bakhtiyari

map function of array is a simple way to exclude an element from array and make a new array.
You can use Object.assign to make new array. I do this hack:
clonedArray = Object.assign([], toBeClonedArray);

Thread Thread
 
jrishabh55 profile image
Rishabh Jain

okey, so,

  1. i think what you are talking about is filter function not map on the array, yes we can use filter to remove an item from the array for sure. and that works its a relative expensive operation tho, because JS have to loop over the entire array.
    With map, you can create a new array but can't really remove an item in a straightforward manner.

  2. Thanks for the Object.assign() thing, i didn't realize we can use it for arrays too, Good to know

Thread Thread
 
hgaleh profile image
Hojjat Bakhtiyari

Thank you for talking about time complexity of those methods.

You can use flatMap too
s.flatMap(x => (x === 10) ? [] : x) === s

Thread Thread
 
hgaleh profile image
Hojjat Bakhtiyari

It is hard to use slice to remove an element, isn't it?

Thread Thread
 
jrishabh55 profile image
Rishabh Jain

Yeah flatMap is an option, but isn't that unnecessary ?, i mean we can use filter if we just wanna iterate over the full array.

arr.filter(it => it !== 1)

Whenever the condition returns true that item is added to the return array, and when the condition returns false it is not added to the new array. i wouldn't recommend this approach tho, same reason no need to iterate over the full array just to remove an item. Much better to use findIndex and splice combination if you don't have the index of which item to remove. with findIndex we will only iterate over an array upto the point we find the requested item.

You can't really remove an array using slice, we can do it with splice tho, it's fairly simple developer.mozilla.org/en-US/docs/W...

arr.splice(start, length) problem with react and splice is that it mutates the existing array and with react we don't wanna mutate the original state so we make a copy array first.