პირველ რიგში გაზომეთ, შემდეგ გამოსწორეთ რეალური მიზეზი — არ დაიმკვიდროთ useMemo ყველგან გამოცნობის ხარჯზე.
იმ React DevTools Profiler (ჩართეთ "Highlight updates when components render"). ის აჩვენებს, რომელი კომპონენტები ხელახლა რენდერდა და რატომ (props შეიცვალა, state შეიცვალა, მშობელი რენდერდა, context შეიცვალა).
1. ახალი object/array/function props თითოეული რენდერისას React.memo დაძლევს:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Context value თითოეული რენდერისას ხელახლა შეიქმნა → ყველა ისეზე re-render აკეთებს. Memoize value ან გაყავით contexts.
3. State ძალიან მაღლა განთავსებული. State დაბლა მოცემა, ისე რომ მასზე ნაკლები კომპონენტი იყოს დამოკიდებული, ხშირად ყველაზე დიდი ზეწოლა:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. ძვირადღირებული ნამუშევარი render-ში → გადაიტანეთ useMemo-ში.
ხელახლა რენდერირება ჩვეულებრივ იაფი — React სწრაფია. უმეტეს "ოპტიმიზაციებს" რთულობა დაემატება გაზომვადი სარგებლის გარეშე. უპირატესი აქვს სტრუქტურული გამოსწორებები (state colocating, list virtualization ათასი სტრიქონისთვის) memos გაფანტვის ნაცვლად. ოპტიმიზაციული გააკეთეთ კონკრეტული hotspots, რომელიც profiler აჩვენებს, და ხელახლა გაზომეთ, რომ დადასტურდეთ რომ გამოსწორება რეალურად დაეხმარა.
IT გასაუბრების კითხვების ბიბლიოთეკა დეტალური პასუხებით — Junior-დან Senior-მდე.
შემოწირულობა