[Table] Multiple renders on Shift+Tab
- 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
If you `Tab` into the table, you can see the render in every single cell of the table
If you `Tab` out of the table, you can see the render in every single cell of the table
But if you press `Shift + Tab` to leave the table, you will see 4x renders of each cell in the table
### 🤔 Expected Behavior?
Good: 1 render on any tab action
Excellent: render only the necessary cells, not the whole table
### 😯 Current Behavior
4x renders when you press Shift + Tab in table
### 💁 Possible Solution
This is a fix of this bug:
https://github.com/adobe/react-spectrum/pull/10247
### 🔦 Context
In our project, we have huge dynamic tables (many on one screen), and any additional rendering affects UX
### 🖥️ Steps to Reproduce
Turn on "Highlight updates" in React Dev Tools on this page:
https://react-aria.adobe.com/Table
Then focus on any cell in the table and then press `Shift + Tab`. You will see 4x on each table cell
### Version
1.19.0 (latest)
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
MacOS
### 🧢 Your Company/Team
dxFeed(Devexperts)
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start with the Table example at https://react-aria.adobe.com/Table and reproduce the Shift+Tab behavior with React DevTools' Highlight updates enabled. Compare the behavior with the fix described in react-spectrum PR #10247, then verify that Shift+Tab produces one render per cell, or only renders necessary cells, without regressions for Tab actions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100