I have an array that I have to add/remove elements from, and I figured I would use Set to accomplish this because of its add has and delete.
const [tags, setTags] = React.useState(new Set())
If I want to add something to tags, how can I do this with setTags? Or do I just call tags.add() ?
A Set is by definition mutable, React won't trigger a new render if you merely call const newSet = set.add(0) cause the shallow comparison between previous and new will always assert to true
You can use the spread operator to change references between each update yet still maintaining all of Set's behaviors
Adding an element
const [state, setState] = useState(new Set())
const addFoo = foo =>{
setState(previousState => new Set([...previousState, foo]))
}
You could still use the add method since it returns the updated set
const addFoo = foo =>{
setState(prev => new Set(prev.add(foo)))
}
Removing an element
Removing is a little trickier. You first need to turn it into an array, filter and spread the result
const removeFoo = foo =>{
setState(prev => new Set([...prev].filter(x => x !== foo)))
}
For clarity
const removeFoo = foo =>{
setState(prev =>{
return prev.filter(x => x !== foo)
})
}
Alternatively you can also make use of the delete methods as follows:
const removeFoo = foo =>{
setState(prev => {
prev.delete(foo);
return new Set(prev);
})
}
You have to create a new set, otherwise react won't know that it needs to rerender. Something like the below will work.
setTags(tags => new Set(tags).add(tag))
I followed the following approach and is working pretty well with my React Native component.
const DummyComponent = () => {
const [stateUserIds, setStateUseIds] = useState(new Set());
....
....
const handleUserSelected = user => {
// Since we cannot mutate the state value directly better to instantiate new state with the values of the state
const userIds = new Set(stateUserIds);
if (userIds.has(user.userId)) {
userIds.delete(user.userId);
} else {
userIds.add(user.userId);
}
setStateUseIds(userIds);
};
....
....
return (
<View>
<FlatList
data={dummyUsers}
renderItem={({item, index}) => {
const selected = stateUserIds.has(item.userId);
return (
<View style={{flex: 2}}>
<Switch
isSelected={selected}
toggleSwitch={() => handleUserSelected(item)}
/>
</View>
);
}}
keyExtractor={(item, index) => item.userId.toString()}
/>
</View>)
}
Hope this helps someone with same use Case. Please refer to the following Code Sandbox example
If you want to use a set as your saved state (rerendering on each change to the set's membership) you can wrap up the techniques described above into a nice little hook that returns an object that behaves (almost...see below) like a set.
Specifically, I use the following custom hook:
const useSetState = (initial) => {
const [set, setSet] = useState(new Set(...initial))
return {
add: el =>
setSet((set) => {
if (set.has(el)) return set
set.add(el)
return new Set(set)
}),
delete: el => {
setSet((set) => {
if (!set.has(el)) return set
set.delete(el)
return new Set(set)
})
},
has: el => set.has(el),
clear: () => setSet(new Set()),
[Symbol.iterator]: () => set.values(),
forEach: (fn) => set.forEach(fn),
keys: () => set.keys(),
values: () => set.values(),
get size() {
return set.size
}
}
}
You can use the hook like const set = useSetState([]) and then call set.add(el), set.delete(el) etc..
However, because of the way this hook is implemented the returned object isn't quite a set in that instanceof, Object.prototype.toString etc won't recognize it as a set (also, I didn't implement the thisArg of forEach). If you really cared about this you could implement the same logic using proxies but that seems excessive for most applications imo
I personally found the fact that all these solutions re-create the set on each modification, which is often counter productive. I wrote the below hook to get around this issue, and IMO having a piece of arbitrary state to trigger a re-render is less hacky than re-creating the set on each change:
function useSet<T>(initialValue?: T[]) {
// a peice of state to trigger a re-render whenever the set changes
// imo this is less hacky than re-creating the set on every state change
const [_, setInc] = useState(false)
//use a ref for the set instead
const set = useRef(new Set<T>(initialValue))
const add = useCallback(
(item: T) => {
if (set.current.has(item)) return
setInc((prev) => !prev)
set.current.add(item)
},
[setInc],
)
const remove = useCallback(
(item: T) => {
if (!set.current.has(item)) return
setInc((prev) => !prev)
set.current.delete(item)
},
[setInc],
)
return [set.current, add, remove] as const
}
The only downside here is if a consumer chooses to bypass the supplied add and remove methods and mutate the ref directly.
I decided to try using an object/array in place of a set. It should be noted that with objects insertion order is not always preserved. But if you have a number of dynamically generated checkboxes and you receive a change event:
// set
function handleChange(e, name) {
setSet(prv => e.target.checked
? new Set([...prv, name])
: new Set([...prv].filter(v => v != name)));
}
// object
function handleChange(e, name) {
setSet(prv => ({...prv, [name]: e.target.checked}));
}
// array
function handleChange(e, name) {
setSet(prv => e.target.checked
? (prv.includes(text) ? prv : [...prv, text])
: prv.filter(v2 => v2 != v));
}
Initialize:
const [set, setSet] = useState(new Set);
const [set, setSet] = useState({});
const [set, setSet] = useState([]);
Add:
setSet(prv => new Set([...prv, text]));
setSet(prv => ({...prv, [text]: true}));
setSet(prv => prv.includes(text) ? prv : [...prv, text]);
Remove:
setSet(prv => new Set([...prv].filter(v2 => v2 != v)));
setSet(prv => ({...prv, [v]: false}));
setSet(prv => prv.filter(v2 => v2 != v));
Iterate:
[...set].map(v => ...);
Object.keys(set).filter(v => set[v]).map(v => ...);
set.map(...);
The code sandbox.
Adding onto @Peter Gerdes's answer, here is a TypeScript version of the hook:
import { useState } from 'react';
const useSetState = <T>(initial: T[]) => {
const [set, setSet] = useState<Set<T>>(new Set(initial));
return {
add: (el: T) =>
setSet((set) => {
if (set.has(el)) return set;
set.add(el);
return new Set(set);
}),
delete: (el: T) => {
setSet((set) => {
if (!set.has(el)) return set;
set.delete(el);
return new Set(set);
});
},
has: (el: T) => set.has(el),
clear: () => setSet(new Set()),
[Symbol.iterator]: () => set.values(),
forEach: (callbackfn: (value: T, value2: T, set: Set<T>) => void, thisArg?: any) => set.forEach(callbackfn, thisArg),
keys: () => set.keys(),
values: () => set.values(),
get size() {
return set.size;
},
};
};
export default useSetState;
Updated for 2023
const set = new Set([...])Set object throughout mutations and rendersUsage
const Component = ({ ...props }: Props)
const set = useSet([1, 2, 3]);
// ...
}
// @/lib/use-state.ts
import { useMemo, useRef, useState } from "react";
export function useSet<T>(initialValue: T[]) {
const triggerRender = useState(0)[1];
const set = useRef(new Set<T>(initialValue))
return useMemo(() => ({
add(item) {
if (set.current.has(item)) return
set.current.add(item)
triggerRender(i => ++i)
},
delete(item) {
if (!set.current.has(item)) return
set.current.delete(item)
triggerRender(i => ++i)
},
clear() {
if (set.current.size === 0) return
set.current.clear()
triggerRender(i => ++i)
},
has: (item) => set.current.has(item),
keys: () => set.current.keys(),
values: () => set.current.values(),
forEach: (...args) => set.current.forEach(...args),
[Symbol.iterator]: () => set.current.values(),
get size() { return set.current.size },
}) as Set<T>, [])
}
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState();
const setCount = () => {
setCounter(count + 1);
setMoreStuff(...);
};