Pourquoi mon application React est devenue lente avec 5 000 enregistrements
J'ai développé une fonctionnalité React comprenant un menu déroulant avec recherche et un tableau de données.
Tout fonctionnait parfaitement pendant le développement. Puis, j'ai chargé des données de production réelles. L'application est devenue lente.
Le menu déroulant mettait plusieurs secondes à s'ouvrir. La saisie dans la barre de recherche était saccadée. L'application consommait trop de mémoire.
Je devais gérer 5 000 fiches utilisateurs. J'avais besoin d'une recherche instantanée et d'un défilement fluide.
Voici comment j'ai résolu le problème.
Utiliser useMemo pour les calculs J'ai arrêté de filtrer les données à chaque rendu. J'ai utilisé useMemo pour stocker la liste filtrée. Cela évite des calculs inutiles au processeur.
Ajouter du Debouncing Chaque frappe de touche déclenchait auparavant une recherche. C'est une opération coûteuse pour les listes volumineuses. J'ai ajouté un debounce de 300 ms. Désormais, l'application ne lance la recherche qu'une fois que l'utilisateur a fini de taper.
Implémenter la Virtualisation C'est la correction la plus importante. Au lieu de rendre 5 000 éléments DOM, j'ai utilisé react-window. Le navigateur ne rend désormais que les 20 ou 30 lignes visibles à l'écran. Cela rend le défilement fluide et réduit la consommation de mémoire.
Prévenir les Re-renders J'ai utilisé React.memo sur les composants de ligne. J'ai également utilisé useCallback pour les gestionnaires d'événements. Cela empêche les composants enfants de se mettre à jour lorsque leurs données restent inchangées.
Utiliser la Pagination côté Serveur J'ai arrêté de récupérer tous les utilisateurs d'un coup. Je suis passé à la récupération de petites pages de 50 enregistrements. Cela permet d'obtenir des réponses API plus rapides et des payloads de données plus légers.
Optimiser Material UI L'Autocomplete de MUI est excellent, mais il peine avec les listes énormes. J'ai limité les options affichées aux 100 premiers résultats pour maintenir la rapidité.
Les résultats :
• Vitesse du menu déroulant : de 5 secondes à moins de 500 ms. • Réponse de recherche : de saccadée à instantanée. • Utilisation de la mémoire : réduction significative.
Les problèmes de performance restent souvent cachés pendant le développement. Ils apparaissent lorsque les données réelles atteignent vos utilisateurs.
Identifiez d'abord vos goulots d'étranglement. Corrigez les plus importants grâce à la mémoïsation, la virtualisation et le debouncing.
Quelle optimisation a le plus aidé vos applications React ? Dites-le-moi dans les commentaires.
Source: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9