How to Use Set with React useState: Adding and Removing Elements Properly

Table of Contents#

1. Understanding Sets in JavaScript
2. Why Use Sets with React useState?
3. Basic Setup: Initializing a Set with useState
4. Adding Elements to a Set in State
5. Removing Elements from a Set in State
6. Checking for Element Existence in a Set
7. Updating Elements in a Set (Handling Objects)
8. Common Pitfalls and Solutions
9. Practical Example: Building a Multi-Select Component
10. Conclusion
11. References

1. Understanding Sets in JavaScript#

Before diving into React, let’s recap what Sets are and why they’re useful:

A Set is a built-in JavaScript object that stores unique values (no duplicates) of any type (primitives or objects). Key features include:

• Uniqueness: Automatically ignores duplicate values (e.g., new Set([1, 2, 2, 3]) becomes {1, 2, 3}).
• Methods: add(value), delete(value), has(value), clear(), and size (property for length).
• Iterable: Can be looped over with for...of or converted to an array with [...set].

When to use a Set instead of an array:

• You need to enforce uniqueness without manual checks (e.g., array.includes()).
• You frequently check if an element exists (Set’s has() is O(1), vs. array’s includes() which is O(n)).
• You don’t need array-specific methods like map or filter (though you can convert Sets to arrays with [...set]).

2. Why Use Sets with React useState?#

React state updates rely on immutability: to trigger a re-render, you must replace the state with a new value (not mutate the existing one). Sets align well with this pattern because:

• Immutability by Design: Unlike arrays (where you might accidentally mutate with push or splice), Sets require explicit copying to modify. This reduces bugs from unintended side effects.
• Performance: For large collections, Set.has() (O(1)) is faster than array.includes() (O(n)), making Sets ideal for state like "selected items" in a list.
• Cleaner Code: Avoid manual duplicate checks (e.g., if (!array.includes(item)) array.push(item)).

3. Basic Setup: Initializing a Set with useState#

To use a Set in React state, initialize useState with a new Set() (or a Set with initial values).

Example: Empty Set Initialization#

import { useState } from 'react';
 
function MyComponent() {
  // Initialize state with an empty Set
  const [mySet, setMySet] = useState(() => new Set()); 
 
  return <div>Set size: {mySet.size}</div>;
}

Example: Set with Initial Values#

If you need initial values, pass them to new Set():

// Initialize with an array of values (duplicates are automatically removed)
const [fruits, setFruits] = useState(() => new Set(['apple', 'banana']));

Why use useState(() => new Set()) instead of useState(new Set())?
The function initializer (() => new Set()) runs only once (on mount), whereas new Set() runs on every render. Use the function form for expensive initializations.

4. Adding Elements to a Set in State#

To add an element to a Set in state, never mutate the existing Set (e.g., mySet.add('orange')). Instead:

1. Create a copy of the current Set.
2. Add the new element to the copy.
3. Update state with the new Set.

How to Do It:#

Use React’s functional update form (setMySet(prev => ...)) to ensure you’re working with the latest state.

function AddElementExample() {
  const [fruits, setFruits] = useState(() => new Set(['apple', 'banana']));
 
  const addFruit = (newFruit) => {
    // 1. Create a copy of the current Set
    // 2. Add the new element to the copy (add() returns the updated Set)
    // 3. Update state with the new Set
    setFruits(prevFruits => new Set(prevFruits).add(newFruit));
  };
 
  return (
    <div>
      <h3>Current Fruits: {[...fruits].join(', ')}</h3>
      <button onClick={() => addFruit('orange')}>Add Orange</button>
      <button onClick={() => addFruit('apple')}>Add Apple (Duplicate)</button>
    </div>
  );
}

Key Notes:

• new Set(prevFruits) creates a shallow copy of the current Set.
• add(newFruit) adds the element to the copy. If the element already exists, add() does nothing (thanks to Set’s uniqueness).
• Clicking "Add Apple (Duplicate)" won’t change the Set, demonstrating automatic duplicate handling.

5. Removing Elements from a Set in State#

Removing elements follows the same immutability rule: create a copy, remove the element, and update state.

How to Do It:#

Use Set.delete(value) on the copied Set. Unlike add(), delete() returns a boolean (not the Set), so we can’t chain it.

function RemoveElementExample() {
  const [fruits, setFruits] = useState(() => new Set(['apple', 'banana', 'orange']));
 
  const removeFruit = (fruitToRemove) => {
    setFruits(prevFruits => {
      // 1. Create a copy of the current Set
      const newFruits = new Set(prevFruits);
      // 2. Remove the element from the copy
      newFruits.delete(fruitToRemove); 
      // 3. Return the updated copy
      return newFruits;
    });
  };
 
  return (
    <div>
      <h3>Current Fruits:</h3>
      <ul>
        {[...fruits].map(fruit => (
          <li key={fruit}>
            {fruit} <button onClick={() => removeFruit(fruit)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Key Notes:

• new Set(prevFruits) copies the current state to avoid mutation.
• delete(fruitToRemove) removes the element. If the element doesn’t exist, delete() does nothing (no errors).

6. Checking for Element Existence#

To check if an element is in the Set, use Set.has(value). This is useful for conditional rendering (e.g., disabling a button if an item is already selected).

Example:#

function CheckExistenceExample() {
  const [selected, setSelected] = useState(new Set());
 
  const toggleSelection = (item) => {
    setSelected(prev => 
      prev.has(item) 
        ? new Set([...prev].filter(x => x !== item)) // Remove if exists
        : new Set(prev).add(item) // Add if not exists
    );
  };
 
  return (
    <div>
      <p>Selected: {[...selected].join(', ') || 'None'}</p>
      {['A', 'B', 'C'].map(item => (
        <button
          key={item}
          onClick={() => toggleSelection(item)}
          disabled={selected.has(item)} // Disable if already selected
        >
          {selected.has(item) ? 'Selected' : 'Select'} {item}
        </button>
      ))}
    </div>
  );
}

Result: Buttons for "A", "B", "C" toggle selection. Disabled when selected, and selected.has(item) checks existence.

7. Updating Elements in a Set (Handling Objects)#

Sets store values by reference, so objects with identical content are treated as unique (e.g., {id: 1} and {id: 1} are different references). To "update" an object in a Set:

1. Delete the old object reference.
2. Add the updated object reference.

Example: Updating an Object in a Set#

function UpdateObjectExample() {
  const [users, setUsers] = useState(() => 
    new Set([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ])
  );
 
  const updateUserName = (userId, newName) => {
    setUsers(prevUsers => {
      // 1. Convert Set to array to find the old object
      const usersArray = [...prevUsers];
      const oldUser = usersArray.find(user => user.id === userId);
 
      if (!oldUser) return prevUsers; // Exit if user not found
 
      // 2. Create a copy of the Set (without the old object)
      const newUsers = new Set(prevUsers);
      newUsers.delete(oldUser);
 
      // 3. Add the updated object (new reference)
      newUsers.add({ ...oldUser, name: newName });
 
      return newUsers;
    });
  };
 
  return (
    <div>
      <h3>Users:</h3>
      {[...users].map(user => (
        <div key={user.id}>
          {user.name} 
          <button onClick={() => updateUserName(user.id, 'Updated ' + user.name)}>
            Update Name
          </button>
        </div>
      ))}
    </div>
  );
}

Key Notes:

• Since objects are reference types, we must delete the old object and add a new one (with { ...oldUser, name: newName }).
• Converting the Set to an array with [...prevUsers] lets us use find to locate the old object.

8. Common Pitfalls and Solutions#

Pitfall 1: Mutating the Set Directly#

Problem: Trying to update state with mySet.add('grape') won’t trigger a re-render (React ignores mutations).

Solution: Always create a new Set:

// ❌ Bad: Mutates the existing Set
const badAdd = () => {
  fruits.add('grape'); 
  setFruits(fruits); // No re-render (same reference)
};
 
// ✅ Good: Creates a new Set
const goodAdd = () => {
  setFruits(prev => new Set(prev).add('grape')); 
};

Pitfall 2: Forgetting Set Uniqueness for Objects#

Problem: Adding {id: 1} twice creates two entries (different references).

Solution: Use a unique identifier (e.g., id) to manually check for duplicates before adding:

const addUser = (newUser) => {
  setUsers(prev => {
    const exists = [...prev].some(user => user.id === newUser.id);
    if (exists) return prev; // Skip duplicates
    return new Set(prev).add(newUser);
  });
};

Pitfall 3: Overusing Array Conversions#

Problem: Converting Sets to arrays ([...mySet]) for rendering is common, but overdoing it (e.g., in loops) hurts performance.

Solution: Convert once per render:

// ❌ Inefficient: Converts to array on every render in the loop
{[...fruits].map(fruit => <li key={fruit}>{fruit}</li>)}
 
// ✅ Better: Convert once at the start of the render
const fruitsArray = [...fruits]; 
return <ul>{fruitsArray.map(fruit => <li key={fruit}>{fruit}</li>)}</ul>;

9. Practical Example: Building a Multi-Select Component#

Let’s combine everything into a reusable multi-select component where users can toggle items, with selections stored in a Set.

import { useState } from 'react';
 
function MultiSelect({ options }) {
  const [selectedOptions, setSelectedOptions] = useState(new Set());
 
  const toggleOption = (option) => {
    setSelectedOptions(prev => 
      prev.has(option) 
        ? new Set([...prev].filter(opt => opt !== option)) // Remove
        : new Set(prev).add(option) // Add
    );
  };
 
  return (
    <div>
      <h3>Select Options:</h3>
      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
        {options.map(option => (
          <button
            key={option}
            onClick={() => toggleOption(option)}
            style={{
              padding: '8px 16px',
              backgroundColor: selectedOptions.has(option) ? 'blue' : 'white',
              color: selectedOptions.has(option) ? 'white' : 'black',
              border: '1px solid #ccc',
              borderRadius: '4px',
            }}
          >
            {option}
          </button>
        ))}
      </div>
      <p>Selected: {[...selectedOptions].join(', ') || 'None'}</p>
    </div>
  );
}
 
// Usage:
function App() {
  return <MultiSelect options={['React', 'Vue', 'Angular', 'Svelte']} />;
}

Features:

• Buttons toggle selection (add/remove from the Set).
• Selected buttons have a blue background (via selectedOptions.has(option)).
• Displays selected options as a comma-separated list.

10. Conclusion#

Using Sets with React’s useState hook is a powerful way to manage collections requiring uniqueness and fast lookups. By following immutability best practices—creating new Sets with new Set(prev) and using add()/delete()—you ensure reliable state updates and avoid common bugs.

Key takeaways:

• Use Sets for unique collections (e.g., selected items, tags).
• Always update state with a new Set (never mutate the old one).
• Leverage Set.has() for O(1) existence checks.
• Handle objects carefully by tracking unique identifiers.

11. References#

• React Docs: useState
• MDN Web Docs: Set
• React State & Immutability Guide
• JavaScript.info: Sets