useMemo and useCallback
-
This lesson introduces useMemo and useCallback Hooks and explains how they are used to optimize performance in React applications.
Performance Optimization Basics
React re-renders components often.
useMemo and useCallback prevent unnecessary calculations and re-creations.Memoizing Values with useMemo
useMemo memoizes computed values.
Example:
const total = useMemo(() => {
return calculateTotal(items);
}, [items]);
Runs only when dependencies change.
Memoizing Functions with useCallback
useCallback memoizes functions.
Example:
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []);
- Prevents function re-creation.