diff --git a/snippets/useSet.md b/snippets/useSet.md new file mode 100644 index 000000000..f662e28a8 --- /dev/null +++ b/snippets/useSet.md @@ -0,0 +1,48 @@ +--- +title: useSet +tags: hooks,state,advanced +firstSeen: 2021-11-01T05:00:00-04:00 +--- + +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`. + +```jsx +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]; +}; +``` + +```jsx +const MyApp = () => { + const [set, { add, remove, clear }] = useSet(new Set(['apples'])); + + return ( +
+ + + +
{JSON.stringify([...set], null, 2)}
+
+ ); +}; + +ReactDOM.render(, document.getElementById('root')); +```