useMemo
useMemo
The useMemo hook memoizes the result of an expensive calculation, recomputing the value only when its dependencies change, rather than on every render.
Basic Syntax
javascript
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Example: Filtering a Large List
javascript
const filteredProducts = useMemo(() => {
return products.filter((product) => product.category === selectedCategory);
}, [products, selectedCategory]);
Example: Calculating a Derived Total
javascript
const cartTotal = useMemo(() => {
return cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
}, [cartItems]);
When to Use useMemo
useMemo is most beneficial for computationally expensive operations, such as filtering or sorting large arrays, or complex mathematical calculations that would otherwise run on every render.
When Not to Use useMemo
For simple, cheap calculations, wrapping them in useMemo adds unnecessary complexity and a small performance overhead without meaningful benefit.
javascript
// Unnecessary - simple calculation does not need memoization
const doubled = useMemo(() => count * 2, [count]);
Common Mistakes with useMemo
- Forgetting to include all dependencies used inside the memoized function
- Using useMemo for trivial calculations that provide no real performance benefit
- Assuming useMemo guarantees the value will never be recalculated, when React may still discard the cache under memory pressure
Conclusion
The useMemo hook is a valuable tool for optimizing genuinely expensive calculations in React Native, but should be applied selectively rather than as a default wrapper for every computed value.
