DEV Community

Cover image for Using Javascript Sets with React useState

Using Javascript Sets with React useState

Ganesh R on November 15, 2019

Recently, I wanted to try something different. To use a Set object as a react state value. Initially, I tried to find examples of this online but ...
Collapse
 
karataev profile image
Eugene Karataev

Thanks for showing that it's possible to use Set instead of Array to handle React state. But what's the benefit of using this data structure? Checking item existence in a collection with has instead of includes seems like not a big deal.
Btw, I see a disadvantage of using Set instead of Array. If you need to render a list of selectedBrands, you'd need to convert it to array before iteration.

Collapse
 
ganes1410 profile image
Ganesh R

Thanks for your reply. I agree that Array would be enough for most use cases. But if you have to maintain a list in the state that requires constant insertion and removal of items Set would be a good use-case for that in my opinion.

Coming to your second question. I would not use Set to store values that need to rendered. Instead of that, it should be used to store the state which modifies the values we are rendering like the example I used in the article.

Collapse
 
karataev profile image
Eugene Karataev

But if you have to maintain a list in the state that requires constant insertion and removal of items Set would be a good use-case for that in my opinion.

I really don't understand why Set is better in this case. Is it performance, because has is faster than includes?

I would not use Set to store values that need to rendered.

Well, it happened to me many times that project requirements change, and tomorrow you'll need to render values that today are stored in Set. Extra work to refactor Set to Array.

Thread Thread
 
ganes1410 profile image
Ganesh R

Hi, I am not saying Set should be the only thing used in this case. I am just saying it can be done using this way too. You are free to use whatever method suitable for your requirements.

Thread Thread
 
cmrdsenya profile image
Senya

With Set you don't have to implement duplication control manually, it provides it to you for free. If you add the same value for the second time, Set will just ignore it, while with Array you'll have the duplicate and you'll have to add more code to handle this case.

Collapse
 
ledu6 profile image
Benoit LEGER-DERVILLE

Thanks for this post and the David K. tweet ... now as I really want to use a Set for filtering long log entries, I'm wondering if the correct way isn't to use a Set in the useRef box, with eventually a useEffect kind of reset ?

What do you think ?

Collapse
 
ganes1410 profile image
Ganesh R

Hi, I used Set values to render some UI. So I used it as state. I think we can also use it as an ref too. But I have not tried that.

Collapse
 
petemcfarlane profile image
Pete McFarlane

I fell into this very trap yesterday, spent a while trying to work out why modifying my set didn’t cause the state to update.

It’s a pity that set isn’t immutable by default, perhaps for performance reasons?

I do prefer the has(), add(), delete() syntax but it’d be even nicer if they just returned a new, immutable set in place, rather than having to pass the results to a new Set(currentSet) again.

I might revisit just using an array with a filter
setState(currentState.includes(val) ? currentState.filter(x => x !== val) : [val, ...currentState])
Although apparently IE doesn’t support Array.includes()...