Creates a stateful 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'));
React, Hooks
Creates a stateful Map
object, and a set of functions to manipulate it.
React, Hooks
Creates a stateful value, returning a getter and a setter function.
React, Hooks
Creates a stateful value that is persisted to localStorage
, and a function to update it.