UI Selection
Optimizing selection for Tables, Cards, Badges, Lists, Trees, Grids, and any selectable UI in React — preventing unnecessary re-renders and improving performance.
1. Understand Before I Code
I've noticed that when a user selects or deselects something, the entire component tree often re-renders — even the parts that weren't touched. With large datasets, this causes unnecessary renders and noticeable UI lag that's hard to ignore.
2. Clarify the Scope
i. What's Happening
Updating selection state at the parent level triggers a re-render of the whole component tree.
ii. Why It Matters
This gets especially bad with large datasets. It leads to sluggish performance and a frustrating user experience, which is exactly what I want to avoid in my work.
3. Boring Solutions, Exciting Results
i. What Can't Break
The overall structure has to stay consistent with shadcn/ui components.
ii. How I'll Know It Works
- Selection state is accessible inside the component but doesn't cause full tree re-renders when it changes.
- Changes only re-render the UI that was actually interacted with.
- State stays in sync with the data — if something gets removed or updated, the selection reflects that.
- The solution scales well for large datasets.
- It's easy to understand and maintain for anyone else (or my future self).
4. Anticipate the Chaos
Data could get out of sync with selection state if not handled carefully. I also have to consider how the UI behaves when a user triggers a "select all" on thousands of rows at once.
5. I Own the Outcome
I take responsibility end-to-end — from fixing the re-render bottleneck to making sure it scales with large datasets.
I make sure it doesn't just work, but:
- Holds up under load
- Keeps the UI responsive even when React is processing "select all" on many rows
- Only re-renders the parts that actually changed
- Stays readable for whoever works on it next
I own the performance, correctness, and long-term maintainability — not just the code. This isn't a "ship and forget" solution for me. I treat it like production code that others will depend on.
In short, I didn't just build a solution — I own the system.
The API I Built
I've packaged this logic into a clean, reusable hook called useSelection. It handles the heavy lifting of performance optimization so I don't have to reinvent the wheel every time.
You can check out the full implementation and documentation for useSelection.
Live Preview