Using a Set data structure in React’s state

by

Since react will identify state changes only if the state property was replaced, and not mutated (shallow compare), you’ll have to create a new Set from the old one, and apply the changes to it.

This is possible since new Set(oldSet) !== oldSet.

const oldSet = new Set([1, 2]);
const newSet = new Set(oldSet);

console.log(oldSet === newSet);

How you use a Set in a class component:

export default class Checklist extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Set()
    }
    
    this.addItem = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  addItem(item) {
    this.setState(({ checkedItems }) => ({
      checkedItems: new Set(checkedItems).add(item)
    }));
  }

  removeItem(item) {
    this.setState(({ checkedItems }) => {
      const newChecked = new Set(checkedItems);
      newChecked.delete(item);
      
      return {
       checkedItems: newChecked
      };
    });
  }

  getItemCheckedStatus(item) {
    return this.state.checkedItems.has(item);
  }

  // More code...
}

How to use a set with the useState() hook.

The example adds random integers between 1-5, and then removes random number in the same range.

const { useState } = React;

const Comp = () => {
  const [state, setState] = useState(() => new Set());

  const addItem = item => {
    setState(prev => new Set(prev).add(item));
  }

  const removeItem = item => {
    setState(prev => {
      const next = new Set(prev);

      next.delete(item);

      return next;
    });
  }

  return (
    <div>
      <button onClick={() => addItem(Math.ceil(Math.random() * 5))}>Add</button>
      <button onClick={() => removeItem(Math.ceil(Math.random() * 5))}>Remove</button>
      <div>
        {Array.from(state)}
      </div>
    </div>
  );
}

ReactDOM
  .createRoot(root)
  .render(<Comp />);
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

More Related Contents:

  1. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  2. What are these three dots in React doing?
  3. How can I communicate between related react components?
  4. When to use functional setState
  5. Reactjs async rendering of components
  6. How to call loading function with React useEffect only once
  7. Applying className/onClick/onChange not working on Custom React Component
  8. How to use componentWillMount() in React Hooks?
  9. React – Preventing Form Submission
  10. React 18, useEffect is getting called two times on mount
  11. How to access custom attributes from event object in React?
  12. this.setState isn’t merging states as I would expect
  13. Is there any other way to implement a “listening” function without an infinite while loop?
  14. Simplest way to merge ES6 Maps/Sets?
  15. Can’t type in React input text field
  16. How to sync Redux state and url hash tag params
  17. Webpack output is empty object
  18. Changing the layout of a component depending on Redux state
  19. What is useState() in React?
  20. When should you NOT use React memo?
  21. How to hide bottom navigation bar on a specific screen in react native?
  22. How to namespace es6 classes (for React components)
  23. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  24. Update single value in item array | react redux
  25. How to include local javascript on a Gatsby page?
  26. React-Redux: Should all component states be kept in Redux Store
  27. React.js best practice regarding listening to window events from components
  28. React’s setState method with prevState argument
  29. How to render a Object in React?
  30. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined

Leave a Comment