Filtering Multi-Select Tag State Efficiently Using JavaScript Sets

function TagFilterList({ allArticles, availableTags }) {
  const [selectedTags, setSelectedTags] = React.useState(() => new Set());
 
  const toggleTag = (tag) => {
    setSelectedTags((prevSet) => {
      const nextSet = new Set(prevSet);
      if (nextSet.has(tag)) {
        nextSet.delete(tag);
      } else {
        nextSet.add(tag);
      }
      return nextSet;
    });
  };
 
  const filteredArticles = allArticles.filter((article) => {
    if (selectedTags.size === 0) return true;
    return article.tags.some((tag) => selectedTags.has(tag));
  });
 
  return (
    <div>
      <div className="tag-bar">
        {availableTags.map((tag) => (
          <button
            key={tag}
            onClick={() => toggleTag(tag)}
            style={{ fontWeight: selectedTags.has(tag) ? 'bold' : 'normal' }}
          >
            {tag}
          </button>
        ))}
      </div>
      <span>Showing {filteredArticles.length} articles</span>
    </div>
  );
}