`Button` component automatically assigns `slot="drag"` in tables causing performance issues with large datasets
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
When using `Button` inside table cells, the component seems to have `slot="drag"` assigned. This causes a cascade of re-renders across all buttons in the table whenever any single button is clicked, resulting in severe performance degradation with large datasets (1000+ table cells). Attempting to override this slot assignment throws an error, making it impossible to optimize performance in table contexts.
I'm not using drag-n-drop.
### 🤔 Expected Behavior?
Buttons in table cells should not automatically receive drag slots, or the slot assignment should be configurable without errors
1. No automatic slot assignment: Buttons inside table cells should not automatically receive `slot="drag"` unless explicitly specified by the developer
2. Configurable slot behavior: If automatic slot assignment is necessary for accessibility, it should be possible to override or disable it without throwing errors
3. Isolated re-renders: Clicking one button should only re-render that specific button, not all buttons in the table
4. Performance in large tables: The component should maintain good performance even with 1000+ buttons in a table context
### 😯 Current Behavior
When `Button` components from React Aria Components are rendered inside table cells:
1. **Automatic slot assignment**: Each button automatically receives `slot="drag"` attribute
2. **Cascade re-rendering**: Clicking any single button triggers re-renders of ALL buttons in the table
3. **Performance degradation**: With 1000+ table cells, this results in:
- Severe UI lag when clicking buttons
- Unresponsive interface during re-render cycles
- Poor user experience in data-heavy applications
4. **Override restrictions**: Attempting to manually set a different slot value (e.g., `slot="null"`) throws an error
5. **No workaround available**: Cannot disable or configure this automatic slot behavior
### 💁 Possible Solution
1 and 2 in Expected Behavior
### 🔦 Context
### What We're Trying to Accomplish
- Responsive data tables with instant button interactions
- Support for large datasets (1000+ interactive elements) without performance issues
- Clean implementation using React Aria Components without workarounds
### Current Status
We've attempted various optimization strategies (memo, context splitting, component optimization) but the automatic `slot="drag"` assignment continues to cause cascade re-renders, making RAC's `Button` inside a RAC's `Table` unsuitable for our table-heavy use cases.
### 🖥️ Steps to Reproduce
I'm using `react-scan` to see the re-renders. But it's not working in Codesanbox. Please copy/paste the code locally.
https://codesandbox.io/p/sandbox/strange-cache-ng37n9
### Version
"react-aria-components": "^1.12.1"
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
macOS 26.0
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.