Das Tippen in einem Filterfeld auf einer Seite mit ein paar tausend Zeilen fühlt sich träge an. Wie diagnostizierst und behebst du das?

Profile, bevor du irgendetwas änderst: Nimm eine Tippsitzung auf und schau, ob die Zeit in die Filterberechnung, ins Rendern der Zeilen oder in Layout und Paint geht. Die üblichen Fixes, nach Wirkung sortiert, sind Virtualisierung, damit nur sichtbare Zeilen rendern, den gefilterten Wert mit useDeferredValue oder einer Transition verzögern, die Zeilen-Komponente memoisieren und den State des Inputs von der Liste trennen.

Ich würde es im React Profiler und im Performance-Panel des Browsers aufzeichnen, bevor ich Code anfasse, denn es gibt drei verschiedene Ursachen, die sich identisch anfühlen. Ist der Commit riesig, sind es die Zeilen. Steckt die Scripting-Zeit in meiner Filterfunktion, sind es die Daten. Ist es Layout Thrashing, misst irgendwo etwas pro Zeile das DOM. Bei ein paar tausend Zeilen ist es in neun von zehn Fällen schlicht so, dass alle rendern, Virtualisierung ist also der große Gewinn, es rendert nur das sichtbare Fenster plus ein kleines Overscan. Obendrauf trenne ich die zwei Updates: Das Input bleibt dringend, damit sich Tippen sofort anfühlt, und das gefilterte Ergebnis läuft über eine Transition oder useDeferredValue, damit React veraltete Arbeit wegwerfen kann, sobald der nächste Tastendruck kommt. Die Zeilen-Komponente zu memoisieren hilft, sobald die Liste virtualisiert ist, davor deutlich weniger. Ich habe das an einer Kundenliste gemacht, die sich ab rund viertausend Zeilen unbenutzbar anfühlte, und Virtualisierung plus ein Deferred Value haben die Interaktion von etwa vierhundert Millisekunden auf unter sechzehn gebracht.