React Memo is a higher-order component in React that memorizes the rendered output of the passed component preventing unnecessary renders, thus optimizing the performance of the component. It is mainly used for functional components but can also be used with class components if they are wrapped inside a functional component.
React Memo is similar to `PureComponent` for class components, where PureComponent does a shallow comparison of the previous and current props and state to decide whether to re-render or not. React Memo does the same but for functional components. However, using React.memo or PureComponent doesn’t mean you won’t face re-renders. You still have to ensure that objects and functions passed as props are not being recreated every time the parent component renders.
Use React Memo when:
To use React Memo, you simply wrap your component with `React.memo()`:
const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
});
Here’s a simplified example to illustrate how React Memo works:
import React, { useState, memo } from 'react';
const Counter = memo(({ count }) => {
console.log('Render: Counter');
return {count};
});
const App = () => {
const [count, setCount] = useState(0);
const [inputValue, setInputValue] = useState('');
return (
<div>
<Counter count={count} />
<button onClick={() => setCount(count + 1)}>Increment</button>
<input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
</div>
);
};
export default App;
In this example, the `Counter` component is wrapped with `memo`, and it will only re-render when the `count` prop changes. Typing in the input field will not cause the `Counter` component to re-render, although it will cause the `App` component to re-render.
By default, React Memo does a shallow comparison of the previous and the new props. This means, if you pass an object or an array as a prop, it will cause a re-render if a new reference is created, even if the content of the object or array is the same.
If you need to do a deep comparison or any custom comparison, you can pass a comparison function as the second argument to React.memo:
const MyComponent = React.memo(
function MyComponent(props) {
/* render using props */
},
(prevProps, nextProps) => {
// return true if passing nextProps would return
// the same result as passing prevProps to render,
// otherwise return false
}
);
While React.memo can be a handy tool to optimize the rendering of components, it comes with its own set of limitations and considerations:
Profiling using the React DevTools can help in understanding whether a component is re-rendering unnecessarily and whether `React.memo` is actually optimizing the renders.
React Memo is a powerful tool for optimizing functional components in React when used judiciously. It’s important to understand when to use it, as it's not a one-size-fits-all solution. Profiling and understanding the specific needs and behaviors of your components are crucial before deciding to use React.memo.
Moreover, keep in mind that while avoiding re-renders is crucial in optimizing performance, focusing on other aspects such as minimizing the initial load time, optimizing the asset sizes, and improving the overall user experience are equally important in building efficient and user-friendly applications.
UPCET Exam
Click Here
SAAT Exam
Click Here
MHT CET Exam
Click Here
IPU CET Exam
Click Here
KCET Exam
Click Here
COMEDK UG Exam
Click Here
VITEEE Exam
Click Here
BITSAT
Click Here
DSAT: Dayanand Sagar Admission Test
Click Here
Career In Animation in india
Click Here
Merchant Navy Courses in india
Click Here
Interior Design Career in india
Click Here
UGC NET Exam
Click Here
B. Ed Exam
Click Here
AFCAT - Air Force Common Admission Test
Click Here
GATE Exam
Click Here
Joint Entrance Examination (JEE)
Click Here
Common Admission Test (CAT)
Click Here
CDS - Combined Defence Services Exam
Click Here