All checkboxes are re-rendered in each render in a table with rowSelection enabled

(5 commentaires) (1 réaction) (0 personne assignée)TypeScript (54 612 forks)batch import

Inactivehelp wanted

Métriques du dépôt

I have searched the issues of this repository and believe that this is not a duplicate.

open the codesandbox demo in a new window
open the react dev tools profiler tab, check Record why each component rendered while profiling.
start the react dev tools profiling
check one record in the demo table
stop the react dev tools profiling
in the flamegraph, one can see every single checkbox is re-rendered with reasons saying: "Props changed: (onClick, onChange)"

Only the relative checkbox should be re-rendered.

All checkboxes are re-rendered.

There will be a noticeable UI lagging when there are hundreds of records in a table. onClick and onChange shouldn't be updated in each render.

Direction de recherche: Examinez pourquoi les propriétés onClick et onChange des cases à cocher sont recréées à chaque rendu. Vérifiez si les gestionnaires de rowSelection sont correctement mémorisés avec useCallback ou s'ils sont définis en ligne dans le composant tableau, ce qui entraîne la réception de nouvelles références par toutes les cases à cocher et leur re rendu. Examinez également si la mise à jour de l'état de sélection des lignes déclenche un re rendu de toutes les lignes en raison de l'absence de React.memo ou d'optimisation des clés.
Stack technique: reacttypescript
Domaine: frontend
Type d'issue: Bug
Difficulté: 2
Temps estimé: 1-3 heures
Statut d'activité: Active
Clarté: Claire
Prérequis: ReactJavaScript
Accessibilité débutant: 50