javascript / intermediate
Snippet
Filtering Multi-Select Tag State Efficiently Using JavaScript Sets
Storing multi-select filters in a JavaScript `Set` rather than an Array provides O(1) membership checks with `.has()`. When toggling items in state, instantiating a new `Set(prevSet)` ensures React detects a new reference and triggers a re-render. Control flow in the filtering step checks `selectedTags.size === 0` to immediately return all items when no filters are active, avoiding unnecessary iterations.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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) => (<buttonkey={tag}onClick={() => toggleTag(tag)}style={{ fontWeight: selectedTags.has(tag) ? 'bold' : 'normal' }}>{tag}</button>))}</div><span>Showing {filteredArticles.length} articles</span></div>);}
react
Breakdown
1
const nextSet = new Set(prevSet);
Creates a shallow clone of the existing Set to maintain state immutability.
2
if (nextSet.has(tag)) { nextSet.delete(tag); } else { nextSet.add(tag); }
Controls toggle logic conditionally by adding or removing values in constant time.
3
return article.tags.some((tag) => selectedTags.has(tag));
Evaluates whether an article contains at least one of the actively selected filter tags.