Back to React Use

`useSet`

docs/useSet.md

17.6.0967 B
Original Source

useSet

React state hook that tracks a Set.

Usage

What is the difference between the "clear()" method and the "reset()" method?

The "reset()" method returns the "Set" to the initial value passed during "useSet The "clear()" method completely empties the "Set".

jsx
import {useSet} from 'react-use';

const Demo = () => {
  const [set, { add, has, remove, toggle, reset, clear }] = useSet(new Set(['hello']));

  return (
    <div>
      <button onClick={() => add(String(Date.now()))}>Add</button>
      <button onClick={() => reset()}>Reset</button>
      <button onClick={() => clear()}>Clear</button>
      <button onClick={() => remove('hello')} disabled={!has('hello')}>
        Remove 'hello'
      </button>
      <button onClick={() => toggle('hello')}>Toggle hello</button>
      <pre>{JSON.stringify(Array.from(set), null, 2)}</pre>
    </div>
  );
};