react/compose-with-tanstack-pacer
OfficialDebounce input and throttle resizes for smooth tables
Software Engineering#performance#react#throttle#debounce#tanstack-table#column resizing#column filtering
AuthorTanStack
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill solves UI jank caused by React Table state updates firing on every keystroke for column filters and excessively fast updates during column resize drags.
Core Features & Use Cases
- Debounced filter writers with instant input UX: keep local input state responsive while committing to the table state with trailing-edge debouncing.
- Throttled resize updates for smooth drag interactions: throttle resize state changes to roughly one animation frame to avoid flooding updates.
- Use cases: large datasets with expensive filtering, interactive column filter inputs, and drag-to-resize column headers in TanStack Table v9 React apps.
Quick Start
Install @tanstack/react-pacer and wrap your column filter onChange writers with useDebouncedCallback while throttling onColumnResizingChange with useThrottledCallback.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: react/compose-with-tanstack-pacer Download link: https://github.com/TanStack/table/archive/main.zip#react-compose-with-tanstack-pacer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.