რა აკეთებს React.memo და როდის არის ღირებული მისი გამოყენება?

Question

Accepted Answer

`React.memo` დაფარავს კომპონენტს, რათა **გამოტოვოს თავიდან რენდერირება, როდესაც მისი props-ები არიან თაბლოვანი ტოლი წინა რენდერის მიმართ**. ნაგულისხმევად შვილი კომპონენტი ხელახლა რენდერდება ყოველ ჯერზე, როდესაც მშობელი ხელახლა რენდერდება; `memo` მოკლედ იკვეთავს ამას, როდესაც props-ები ნამდვილად არ შეცვლილა. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## პრობლემა: საჭიროა სტაბილური props-ები `memo` აკეთებს **თაბლოვან** შედარებას. თუ მშობელი ახალი object/array/function გადასცემს ყოველ რენდერზე, შედარება ყოველთვის ვერ ხერხდება და `memo` არაფერს არ აკეთებს: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` გამოსწორება `useCallback`-ით ფუნქციის სტაბილიზაციით: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## როდის არის ღირებული - კომპონენტი რენდერდება **ხშირად** **იგივე** props-ებით და მისი რენდერი არ-ტრივიალური (დიდი სიები, ძვირადღირებული subtree-ები). ## როდის არ არის - უმეტესი კომპონენტი იაფია; შედარებას თავისი খarჯი აქვს, და ყველაფრის შეფუთვა ართულებს პროცესს სარგებლის გარეშე. **პირველ რიგში გააკეთეთ profiling** React DevTools Profiler-ით, შემდეგ memoize-ით დამტკიცებული hotspot-ები — არ გააკეთოთ სხეულოვანი მემოიზაცია.