useMemo Hook
useMemo is a React Hook used for performance optimization.
It memorizes a calculated value and prevents unnecessary recalculations on every render.
Why useMemo Is Important
In React, components re-render whenever state or props change.
During every re-render, expensive calculations can run again unnecessarily.
useMemo helps optimize this behavior.
[grid]
React Performance Optimization
Avoid Expensive Recalculation
Fast React Rendering
Optimized UI Updates
[/grid]
Basic Syntax
[code theme="dark"]
const memoizedValue = useMemo(() => {
return calculation();
}, [dependency]);
[/code]
Here:
-
useMemo stores the calculated value
-
Calculation runs only when dependency changes
-
Prevents unnecessary recalculation
Problem Without useMemo
Every render runs the heavy calculation again.
Example
[code theme="dark"]
function App(){
const [count,setCount] = useState(0);
function expensiveCalculation(){console.log("Heavy Calculation");
return count * 1000;}
const result = expensiveCalculation();
return(
{result}
);
}
[/code]
Problem:
-
expensiveCalculation runs on every render
-
Can reduce performance
-
Large applications may become slower
Solution Using useMemo
useMemo stores the calculated result.
Calculation runs only when dependencies change.
Optimized Example
[code theme="dark"]
import { useMemo, useState } from "react";
function App(){
const [count,setCount] = useState(0);
const result = useMemo(() => {console.log("Heavy Calculation");
return count * 1000;
console.log("Heavy Calculation");
return count * 1000;}, [count]);
return(
{result}
);
}
[/code]
Now:
-
Calculation runs only when count changes
-
React reuses previous value
-
Improves performance
[grid]
Memoized Calculation
Optimized React Hook
Prevent Extra Calculations
Fast React Performance
[/grid]
How useMemo Works
[code theme="dark"]
Render Component
↓
Check Dependencies
↓
Dependencies Changed
→ Recalculate Value
Dependencies Same
→ Use Stored Value
[/code]
Dependency Array
The dependency array controls when useMemo should recalculate.
[code theme="dark"]
useMemo(() => {
return calculation();
}, [count]);
[/code]
If:
-
count changes → recalculation happens
-
count stays same → previous value reused
Best Use Cases
-
Heavy calculations
-
Large data filtering
-
Expensive computations
-
Optimizing large React apps
-
Complex UI rendering
Example: Filtering Large Data
[code theme="dark"]
const filteredUsers = useMemo(() => {
return users.filter(user =>
user.active
);
}, [users]);
[/code]
Filtering runs only when users data changes.
Difference Between Normal Calculation and useMemo
|
Feature
|
Normal Calculation
|
useMemo
|
|
Recalculates Every Render
|
Yes
|
No
|
|
Performance Optimization
|
No
|
Yes
|
Important Notes
-
useMemo is mainly for optimization
-
Do not overuse useMemo
-
Useful for expensive calculations
-
Small calculations usually do not need useMemo
Common Mistake
[code theme="dark"]
const value = useMemo(() => {
return count + 1;
}, [count]);
[/code]
Small calculations like this usually do not need optimization.
Final Understanding
[code theme="dark"]
useMemo
Store calculated value
and avoid unnecessary
recalculations
[/code]