React.memo
Default, MEIN, JAB, EK, PARENT, COMPONENT, RE-RENDER, HOTA, hai, SAARE, CHILD, COMPONENTS, BHI, RE-RENDER, HOTE, HAIN — CHAHE, UNKE, PROPS, CHANGE, HUE, HON, YA, NAHI. React.memo(Component), EK, "HIGHER-ORDER, COMPONENT" hai, JO, PROPS, KO, "SHALLOW, COMPARE" KARTA, hai — AGAR, SAME, HAIN, RE-RENDER, SKIP, HO, JAATA, hai.
React.memo, EK, PERFORMANCE, OPTIMIZATION, hai, HAR, COMPONENT, PAR, LAGAने, KI, ZAROORAT, NAHI — SIRF, TAB, USE, KARO, JAB, PROFILING, SE, PATA, CHALE, KI, EK, COMPONENT, EXPENSIVE, RE-RENDERS, KAR, RAHA, hai (jaise, BADI, LIST, YA, COMPLEX, CALCULATIONS).
const ExpensiveItem = React.memo(function ExpensiveItem({ data }) {
console.log("Rendering:", data.id); // sirf, TAB, log, hoga, jab, data, CHANGE, ho
return <div>{data.name}</div>;
});
function List({ items, unrelatedState }) {
// unrelatedState CHANGE hone par, List, RE-RENDER hoga,
// LEKIN, ExpensiveItem, RE-RENDER, SKIP, kar, sakta, hai (agar, items, SAME, hain)
return items.map(item => <ExpensiveItem key={item.id} data={item} />);
}- React.memo = props, ka, SHALLOW, comparison — SAME, hone, par, re-render, SKIP
- Har component, PAR, LAGAने, ki, ZAROORAT, NAHI — profiling, se, decide, karo
- Non-primitive props (objects/functions), useMemo/useCallback, SE, STABLE, RAKHNE, PADТE, HAIN
React.memo(Component, areEqual), EK, SECOND, ARGUMENT, ACCEPT, KARTA, hai — EK, CUSTOM, COMPARISON, FUNCTION, JO, DEFAULT, SHALLOW, COMPARISON, KO, OVERRIDE, KARTA, hai. RARELY, ZAROORI, hai, LEKIN, SPECIFIC, PERFORMANCE, CASES, MEIN, USEFUL.
const MyComponent = React.memo(Component, (prevProps, nextProps) => {
return prevProps.id === nextProps.id; // sirf, id, compare, karo
});React.memo, SIRF, PROPS, CHANGE, KO, PREVENT, KARTA, hai — AGAR, COMPONENT, KE, ANDAR, USKA, KHUD, KA, useState/useContext, CHANGE, HOTA, hai, COMPONENT, RE-RENDER, HOGA, CHAHE, WOH, memo-WRAPPED, HO.