React Hooks
Performancia Hookok
useMemo és useCallback – memoizálás, felesleges újrarenderelés elkerülése.
Performancia Hookok
Ezek a hookok memoizálást végeznek – megjegyzik egy korábbi számítás eredményét, és csak akkor számítják újra, ha a bemenetek változtak. Így elkerülhető a felesleges újrarenderelés.
useMemo
Mire való?
Drága számítás eredményének cachelése.
Mikor használjuk?
- Ha egy számítás (pl. nagy lista szűrése/rendezése) lassú, és nincs értelme minden renderelésnél újrafuttatni.
- Ha egy objektumot referencia alapján kell stabilnak tartani (pl. dependency array-nek adod át).
import { useMemo } from 'react';
function ProductList({ products, searchTerm }) {
// Ez csak akkor számolódik újra, ha products vagy searchTerm változik
const filteredProducts = useMemo(() => {
return products.filter(p =>
p.name.toLowerCase().includes(searchTerm.toLowerCase())
);
}, [products, searchTerm]);
return (
<ul>
{filteredProducts.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}⚠️ Ne használd túl! Ha a számítás egyszerű, a useMemo maga is overhead. Profilerrel mérj, mielőtt optimalizálsz.
useCallback
Mire való?
Egy függvény definíciójának cachelése – ugyanazt a függvény referenciát adja vissza, amíg a függőségek nem változnak.
Mikor használjuk?
- Ha egy függvényt
React.memo-val védett child komponensnek adsz át (hogy ne renderelje újra feleslegesen). - Ha a függvény egy
useEffectdependency array-ben szerepel.
import { useCallback, useState, memo } from 'react';
// Ez a child csak akkor renderelődik újra, ha a props tényleg megváltozott
const Button = memo(function Button({ onClick, label }) {
return <button onClick={onClick}>{label}</button>;
});
function Parent() {
const [count, setCount] = useState(0);
// Enélkül minden render új függvény referenciát adna, és Button újrarenderelne
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []); // nincs dependency, sosem változik
return (
<div>
<p>Szám: {count}</p>
<Button onClick={handleClick} label="Növel" />
</div>
);
}💡 useMemo vs useCallback:
useMemo: egy számítás eredményét memoizálja.useCallback: egy függvényt memoizál.