React Hook to use a native JS Set as State, maintaining the interface entirely, and properly handling re-rendering. Uses Immer under the hood.
APACHE-2.0 License
A React Hook to use JavaScript's Set as React State, using an identical interface. Uses Immer under the hood.
This is a very lightweight package, it only depends on one other, extremely lightweight React hook (besides Immer itself).
Total package size is ~3KB including TypeScript types.
npm i use-set-as-state immer
import { useSetAsState } from 'use-set-as-state';
const FunctionComponent = () => {
const theSet = useSetAsState(new Set());
const onClick = () => {
theSet.add('checkboxChecked');
};
return <input type="checkbox" checked={theSet.has('checkboxChecked')}>;
};
Note: The add
function returns the NEXT (Draft) state, even if the render has not occurred yet.
const onClick = () => {
const draft = theSet.add('header');
console.log(draft.has('header')); // true
};
All contributions are welcome, please open an issue or pull request.
To use this repository:
npm i -g pnpm
(if don't have pnpm installed)pnpm i
npx projen
(this will ensure everything is setup correctly, and you can run this command at any time)npx projen build
at any time to build the project.