कुछ हजार rows वाले page पर filter box में टाइप करना अटका हुआ लगता है। आप इसकी जांच और मरम्मत कैसे करेंगे?

कुछ भी बदलने से पहले profile कीजिए: टाइप करने का एक दौर record कीजिए और देखिए कि वक्त filter की गणना में जा रहा है, rows render करने में, या layout और paint में। आम हल, फायदे के क्रम में, हैं virtualize करना ताकि सिर्फ दिखने वाली rows render हों, छंटी हुई value को useDeferredValue या किसी transition से टालना, row वाले component को memoize करना, और input की state को list से अलग रखना।

मैं code छूने से पहले इसे React Profiler और browser के performance panel में record करूंगा, क्योंकि तीन अलग वजहें एक जैसी महसूस होती हैं। अगर commit बहुत बड़ा है, तो वजह rows हैं। अगर scripting का वक्त मेरे filter function में है, तो वजह data है। अगर layout बार बार बन रहा है, तो कोई हर row पर DOM नाप रहा है। कुछ हजार rows के साथ दस में नौ बार वजह सीधे यह होती है कि वे सब render हो रही हैं, तो virtualization बड़ी जीत है, सिर्फ दिखने वाली खिड़की और थोड़ा सा overscan render करना। उसके ऊपर मैं दोनों updates अलग करता हूं: input जरूरी रहता है ताकि टाइप करना तुरंत लगे, और छंटा हुआ नतीजा किसी transition या useDeferredValue से गुजरता है ताकि अगला keystroke आते ही React बासी काम छोड़ सके। row वाले component को memoize करना list के virtualize हो जाने के बाद मदद करता है, उससे पहले कम। मैंने यह एक customer list पर किया जो करीब चार हजार rows पर इस्तेमाल लायक नहीं लगती थी, और virtualization तथा टाली गई value ने बातचीत को करीब चार सौ milliseconds से सोलह के नीचे ला दिया।