adobe / adobe/react-spectrum

[Table] Multiple renders on Shift+Tab

Open
#10,254 1 comment 0 reactions 0 assignees View on GitHub
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

Image

### 🤔 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.