useMemo & useCallback
useMemo(() => expensiveCalculation(a, b), [a, b]), EK, EXPENSIVE, COMPUTATION, KE, RESULT, KO, CACHE, KARTA, hai — SIRF, TAB, RE-CALCULATE, HOTA, hai, JAB, DEPENDENCIES (a, b) CHANGE, HOTI, HAIN, WARNA, PURANA, (CACHED) RESULT, RETURN, HOTA, hai.
useCallback(fn, [deps]), EK, FUNCTION, KO, MEMOIZE, KARTA, hai — HAR, RENDER, PAR, EK, NAYA, FUNCTION, INSTANCE, BANANE, KE, BAJAYE, SAME, FUNCTION, REFERENCE, RETURN, KARTA, hai (JAB, TAK, DEPS, CHANGE, NA, HON). YE, IMPORTANT, hai, JAB, FUNCTION, KO, React.memo, KIYE, HUE, CHILD, KO, PROP, KI, TARAH, PASS, KIYA, JAATA, hai.
function ProductList({ products, category }) {
// Expensive filtering, SIRF, tab, RE-RUN, hoga, jab, products/category, CHANGE, ho:
const filtered = React.useMemo(
() => products.filter(p => p.category === category),
[products, category]
);
// Function, SAME reference, RAKHТA, hai, jab, tak, deps, CHANGE, NA, hon:
const handleSelect = React.useCallback((id) => {
console.log("Selected:", id);
}, []);
return filtered.map(p => <MemoizedItem key={p.id} product={p} onSelect={handleSelect} />);
}- useMemo = EXPENSIVE, computation, ke, RESULT, ko, CACHE karta hai
- useCallback = function, reference, ko, MEMOIZE karta hai (SAME, instance, RAKHТA, hai)
- Overuse, ANTI-PATTERN, hai — SIRF, MEASURED, performance, problems, ke, liye
useMemo, SIRF, EXPENSIVE, CALCULATIONS, KE, LIYE, NAHI, hai — EK, OBJECT/ARRAY, KO, "STABLE, REFERENCE" DENE, KE, LIYE, bhi, USE, HOTA, hai, jaise, EK, CONFIG, OBJECT, JO, EK, useEffect, KI, DEPENDENCY, ARRAY, MEIN, JAATA, hai.
const config = React.useMemo(() => ({ apiUrl, timeout }), [apiUrl, timeout]);
useEffect(() => { fetchData(config); }, [config]); // config, STABLE, rahegiReact Compiler (PEHLE, "React Forget" NAAM SE, JAANA, JAATA, THA), EK, NAYA, BUILD-TIME, TOOL, hai, JO, AUTOMATICALLY, useMemo/useCallback, KI, ZAROORAT, KO, KAM, KARTA, hai — COMPILER, KHUD, ANALYZE, KARKE, MEMOIZATION, ADD, KARTA, hai.