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). ## हे कधी योग्य नसते - बहुतांश घटक स्वस्त असतात; तुलना स्वतःची किंमत आहे, आणि सर्व गोष्टी लपेटणे कोणत्याही लाभाशिवाय जटिलता जोडते. **प्रथम React DevTools Profiler सह प्रोफाइल करा**, नंतर सिद्ध hotspot मेमोइজ करा — अंधाधुंद मेमोइज करू नका.