Memoizace a výkon
Memoizace je technika, která umožňuje optimalizovat výkon aplikace tím, že si pamatuje výsledky funkcí za stejných podmínek (stavu a parametrů) a předává je namísto opakovaného volání funkce.
⚠️ Od React 19 je memoizace součástí React compileru a není potřeba ji tolik používat. Zde ji uvádíme pro představu o tom, jak to funguje.
Je vhodné dále používat useMemo pro komponenty, abychom zabránili zbytečným re-renderům komponenty.
🔄 React.memo
const Component = (props) => {
const {a,b,c,d} = props;
// some heavy computation
const result = a * (b + c * (-d));
return <div>Hello, {result}!</div>;
};
export default React.memo(Component);📦 useMemo
/**
* Komponenta, která se má memoizovat (vykresluje se jen, pokud se změní props)
*
* @param props - Props komponenty
* @returns Výsledek výpočtu
*/
const Component = (props) => {
const {a,b,c,d} = props;
// some heavy computation
const result = a * (b + c * (-d));
return <div>Hello, {result}!</div>;
};
export default useMemo(Component, [a,b,c,d]);🪝 useCallback
/**
* Funkce, která se má spustit pouze pokud se změní hodnota, jinak se vrací předchozí výsledek
*
* @param value - Hodnota, která se má zdvojnásobit
* @returns Dvojnásobek hodnoty
*/
const functionToMemoize = (value) => {
return value * 2;
}
export default useCallback(functionToMemoize, [value]);📋 Praktické aspekty optimalizace výkonu
- Optimalizace výkonu pomocí memoizace je důležitá pro zrychlení aplikace.