Profilez avant de changer quoi que ce soit : enregistrez une session de frappe et regardez si le temps part dans le calcul du filtre, dans le rendu des lignes, ou dans la mise en page et la peinture. Les correctifs habituels, par ordre de rendement, sont la virtualisation pour ne rendre que les lignes visibles, le report de la valeur filtrée avec useDeferredValue ou une transition, la mémoïsation du composant de ligne, et le fait de garder l'état du champ séparé de celui de la liste.
Pourquoi les recruteurs posent cette question
C'est une question de performance avec une mauvaise réponse évidente : deviner et saupoudrer des useMemo partout. Le recruteur veut voir une approche mesure d'abord, une lecture correcte des sorties du profiler, et la connaissance du levier qui compte vraiment à cette échelle. Il veut aussi vous entendre séparer les deux problèmes distincts : un champ qui colle et une liste trop longue à rendre.
Comment structurer votre réponse
- Dites que vous mesurez d'abord et nommez l'outil que vous utilisez.
- Séparez le problème : sensation de champ lent contre rendu de liste lent.
- Donnez les correctifs par ordre d'impact, en finissant par la virtualisation.
- Mentionnez la vérification du correctif avec la même mesure.
Exemple de réponse
Je l'enregistrerais dans le React Profiler et dans le panneau performance du navigateur avant de toucher au code, parce qu'il y a trois causes différentes qui donnent la même sensation. Si le commit est énorme, ce sont les lignes. Si le temps de script est dans ma fonction de filtre, ce sont les données. Si c'est du layout thrashing, quelque chose mesure le DOM ligne par ligne. Neuf fois sur dix avec quelques milliers de lignes, c'est simplement que toutes se rendent, donc la virtualisation est le gros gain : ne rendre que la fenêtre visible plus un petit overscan. En plus de ça, je sépare les deux mises à jour : le champ reste urgent pour que la frappe paraisse instantanée, et le résultat filtré passe par une transition ou useDeferredValue pour que React puisse jeter le travail périmé quand la frappe suivante arrive. Mémoïser le composant de ligne aide une fois la liste virtualisée, beaucoup moins avant. J'ai fait ça sur une liste de clients qui devenait inutilisable vers quatre mille lignes, et la virtualisation plus une valeur reportée ont fait passer l'interaction d'environ quatre cents millisecondes à moins de seize.
Vous passez cet entretien bientôt ? GhostPilot écoute votre appel en direct, repère la question dès qu'elle est posée et affiche une réponse structurée à l'écran en temps réel. Essayez-le lors de votre prochain entretien blanc, ou prenez un Session Pass à $29, sans abonnement, pour le jour J.
Voir comment ça marcheQuestions de relance à prévoir
- Quelle valeur d'overscan choisiriez-vous et pourquoi ?
- Comment la virtualisation affecterait-elle l'accessibilité et la recherche dans la page du navigateur ?
- Déplaceriez-vous le filtrage vers le serveur, et à partir de quel moment ?
Autres questions pour Développeur React
Votre recruteur posera sa propre version de celle-ci. Collez votre véritable fiche de poste dans le Question Predictor gratuit et obtenez les 20 questions que ce poste a le plus de chances de poser, avec ce que chacune cherche vraiment à sonder.
Prédire mes questions