Menu

gitpiper

useSet react Code Snippet in 2022

hooksstateadvanced

Last Updated: 25 September 2022

Creates a stateful Set object, and a set of functions to manipulate it.

  • Use the useState() hook and the Set constructor to create a new Set from the initialValue.
  • Use the 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.
  • Return the 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'));

react snippet similar to useSet For You in September 2022

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2022 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️