adobe / adobe/react-spectrum

`Button` component automatically assigns `slot="drag"` in tables causing performance issues with large datasets

Open
#8,890 5 comments 0 reactions 0 assignees View on GitHub
performance
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.