Set
object, and a set of functions to manipulate it.useState()
hook and the Set
constructor to create a new Set
from the initialValue
.useMemo()
hook to create a set of non-mutating actions that manipulate the set
state variable, using the state setter to create a new Set
every time.set
state variable and the created actions
.const useSet = initialValue => { const [set, setSet] = React.useState(new Set(initialValue)); const actions = React.useMemo( () => ({ add: item => setSet(prevSet => new Set([...prevSet, item])), remove: item => setSet(prevSet => new Set([...prevSet].filter(i => i !== item))), clear: () => setSet(new Set()), }), [setSet] ); return [set, actions]; };
const MyApp = () => { const [set, { add, remove, clear }] = useSet(new Set(['apples'])); return ( <div> <button onClick={() => add(String(Date.now()))}>Add</button> <button onClick={() => clear()}>Reset</button> <button onClick={() => remove('apples')} disabled={!set.has('apples')}> Remove apples </button> <pre>{JSON.stringify([...set], null, 2)}</pre> </div> ); }; ReactDOM.render(<MyApp />, document.getElementById('root'));
Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️