?? React.Memo (Bonus)
SRINIVAS K
Software Engineer specializing in React, TypeScript, JavaScript and Next.js | Building Scalable Web Applications with a Focus on Performance
What is React.memo?
React.memo is a higher-order component (HOC) that optimizes functional components by memoizing them. It prevents unnecessary re-renders by "remembering" the component's last-rendered output. If a component's props don’t change between renders, React.memo will skip re-rendering that component, saving processing time and enhancing performance.
How Does React.memo Work?
React.memo wraps a functional component and compares the previous props with the new ones. If they’re the same, React skips rendering that component. This is especially useful for components that receive complex or nested props, as they can trigger re-renders even when the props haven’t changed.
Here’s a simple usage example of React.memo:
import React from 'react';
// Memoized component to prevent re-render if props haven't changed
const MyComponent = React.memo(({ value }) => {
console.log('Rendering MyComponent');
return <div>{value}</div>;
});
function Parent() {
const [count, setCount] = React.useState(0);
return (
<div>
<MyComponent value="Static Prop" />
<button onClick={() => setCount(count + 1)}>Increase Count</button>
</div>
);
}
Explanation:
In this example:
Right & Wrong Approaches
Using React.memo with props that don’t frequently change:
Using React.memo with frequently changing props:
When Should You Use React.memo?
Overuse can add complexity without significant performance benefit, so reserve React.memo for components where re-rendering has a noticeable impact.
?? Difference Between React.memo and useMemo
领英推荐
Purpose
Usage
React.memo is applied to entire functional components to prevent re-renders:
const MyComponent = React.memo((props) => {
// Component logic here
});
useMemo is used to memoize values or results inside a component:
const memoizedValue = useMemo(() => expensiveFunction(data), [data]);
Use Case
Limitations
Example Comparison
Consider a parent component rendering a ChildComponent that has complex props and heavy calculations:
// Using React.memo to prevent unnecessary re-renders of ChildComponent
const ChildComponent = React.memo(({ data }) => {
// Without React.memo, this would re-render on every parent render, even if props are the same
return <div>{data}</div>;
});
function ParentComponent() {
const data = { name: 'React' };
// Using useMemo to memoize a complex calculation
const memoizedCalculation = useMemo(() => heavyCalculation(data), [data]);
return <ChildComponent data={memoizedCalculation} />;
}
?? Summary
Together, these tools complement each other to optimize React app performance effectively.
?? Tip:
Use React.Memo to memoize Pure Components or Components with complex props to prevent a component from re-rendering if its props haven’t changed. Happy coding!
?? On a mission to teach 1 million students | Developer & Mentor | 5,500+ Students ??| JavaScript | React JS | Redux | Python | Java | Springboot | MySQL | Self-Learner | Problem Solver
1 个月Thanks for sharing! ????
Software Engineer specializing in React, TypeScript, JavaScript and Next.js | Building Scalable Web Applications with a Focus on Performance
2 个月checkout the new article to cache the functions in your React app using useCallback: --> https://www.dhirubhai.net/posts/srinivasthedeveloper_reactjs-reacthooks-usecallback-activity-7260640753297547264-gByi