Retour à la leçonMission
Mission : désaturer le tableau de 8000 utilisateurs
Corriger un memo() inefficace faute de props stables, et virtualiser une longue liste pour éliminer le scroll saccadé.
Contexte
Le Profiler React confirme sur AdminUsersPage.jsx que taper dans la barre de recherche du header, totalement indépendante du tableau, re-rend quand même les 8000 LigneUtilisateur enveloppées dans memo(). Le composant parent recrée onClick={() => ouvrirDetail(u.id)} à chaque rendu directement dans le .map(). De plus, les 8000 <tr> sont toutes montées dans le DOM alors que seules 15 lignes sont visibles à l'écran, ce qui rend le scroll saccadé.