To remember in 5 seconds: Is your calculation slow…

yearworker

@yearworker3d agopublic

$0 earned

2 reactions

To remember in 5 seconds:
Is your calculation slow? (filtering, sorting, calculating a cart total) -> useMemo
Are you passing a function to a child component that is already optimized? -> useCallback
And the golden rule: don't use them everywhere. If a calculation takes 2ms, there’s no point. Use them only when you actually have a performance issue—not by default.
const filteredProducts = products.filter(p => p.price < 100) // computationally expensive
// With useMemo: it only re-filters if 'products' changes
const filteredProducts = useMemo(() => {
return products.filter(p => p.price < 100)
}, [products]) // dependency
// Without useCallback: a new function is created on every render -> the CartButton component re-renders unnecessarily
function addToCart() { ... }
// With useCallback: the same function is kept in memory
const addToCart = useCallback(() => {
// add-to-cart logic
}, [cart]) // the function is only recreated if 'cart' changes

1

1

1

show stats

	earnings
	60,000 mlx total
	$0  total

	engagement
	86 views
	2 reactions

1 comments

@floratis

$0 earned2d ago

Great explanation! I love how you simplified the difference between useMemo and useCallback. The golden rule is so important, optimize when necessary, not just for the sake of it. Practical, clear, and very helpful. Thanks for sharing! 😊✨