Re-rendering happens when a React component updates and renders again.
React re-renders components whenever:
- State changes
- Props change
- Parent component re-renders
Sometimes unnecessary re-renders can reduce application performance.
React provides several optimization techniques to prevent this problem.
[grid]
React Performance Optimization
Prevent Extra Rendering
Optimized React Components
Fast React Applications
[/grid]
Why Prevent Re-renders?
Unnecessary rendering can cause:
-
Slow UI updates
-
Poor application performance
-
Laggy user experience
-
Heavy rendering workload
Common Causes of Re-renders
-
Parent component updates
-
New object references
-
New function references
-
Frequent state changes
-
Improper prop handling
1. Using React.memo
React.memo prevents child component re-rendering when props stay the same.
[code theme="dark"]
function Child(){
console.log("Rendered");
return
Child
;
}
export default React.memo(Child);
[/code]
Now React skips rendering if props are unchanged.
[grid]
React.memo Optimization
Prevent Child Re-render
Optimized React Components
Fast Component Rendering
[/grid]
2. Using useMemo
useMemo stores calculated values and prevents unnecessary recalculation.
[code theme="dark"]
const result = useMemo(() => {
return expensiveCalculation();
}, [count]);
[/code]
Calculation runs only when dependency changes.
3. Using useCallback
useCallback stores function references.
[code theme="dark"]
const handleClick = useCallback(() => {
console.log("Clicked");
}, []);
[/code]
This prevents unnecessary function recreation on every render.
Problem with Function Recreation
[code theme="dark"]
console.log("Hi")} />
[/code]
A new function is created during every render.
This can trigger unnecessary child component re-rendering.
Problem with Object Recreation
[code theme="dark"]
[/code]
A new object reference is created every render.
React treats it as changed props.
[grid]
Stable Props Optimization
Avoid New References
Prevent Extra Updates
Efficient React Rendering
[/grid]
4. Splitting Components
Large components can cause unnecessary rendering.
Splitting UI into smaller components improves performance.
[code theme="dark"]
[/code]
5. Proper Key Usage
React uses keys to track list items efficiently.
[code theme="dark"]
{users.map(user => (
))}
[/code]
Proper keys improve rendering performance and diffing.
6. Avoid Unnecessary State
Too many state updates can trigger excessive rendering.
Keep state minimal and optimized.
Rendering Flow
[code theme="dark"]
State Change
↓
Parent Re-render
↓
Props Check
↓
Same Props
→ Skip Render
Changed Props
→ Re-render Component
[/code]
Best Use Cases
-
Dashboard applications
-
Large React apps
-
Data-heavy UI
-
Reusable components
-
Performance-sensitive applications
Difference Between Normal Rendering and Optimized Rendering
|
Feature
|
Normal Rendering
|
Optimized Rendering
|
|
Unnecessary Re-renders
|
More
|
Reduced
|
|
Performance
|
Lower
|
Better
|
Best Practices
-
Use React.memo carefully
-
Use stable props
-
Avoid inline functions
-
Avoid inline objects
-
Use useMemo and useCallback wisely
-
Split large components
Final Understanding
[code theme="dark"]
Preventing Re-renders
Reduce unnecessary rendering
to improve React performance
[/code]