`React.memo` is a Higher Order Component (HOC) used to optimize the performance of function components. It works by memoizing the component's render output, skipping re-renders when the component's props haven't changed, thereby improving performance. Below is a detailed introduction and usage guide for `React.memo`.
## 1. Basic Usage
The basic usage of `React.memo` is to pass a function component as a parameter to `React.memo` and return a memoized component.
## Example
import React from 'react';
import ReactDOM from 'react-dom';
const MyComponent = React.memo((props)=>{
console.log('Rendering MyComponent');
return
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
In this example, even when the `count` state changes, `MyComponent` will not re-render because its `props` have not changed.
## 2. Using Custom Comparison Functions
By default, `React.memo` only compares the `props` before and after, and will not re-render if there are no changes. You can pass a custom comparison function to more precisely control the re-rendering logic.
### Custom Comparison Function Signature:
function areEqual(prevProps, nextProps) { // Return true to indicate equality, no re-render needed // Return false to indicate inequality, re-render needed}
## Example
import React from 'react';
import ReactDOM from 'react-dom';
const MyComponent = React.memo((props)=>{
console.log('Rendering MyComponent');
return
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
In this example, the custom comparison function checks if `text` has changed. If `text` has not changed, `MyComponent` will not re-render.
## 3. Practical Application Scenarios
`React.memo` is particularly suitable for the following scenarios:
* **Static Data Display**: Components receive `props` that rarely change, but the components themselves are relatively complex, making re-rendering expensive.
* **Performance Optimization**: In large lists or tables, where each item is an independent component, using `React.memo` can avoid unnecessary re-renders.
* **Avoiding Deep Equality Checks**: Custom comparison functions can avoid deep equality checks, especially when `props` contain large amounts of data.
## 4. Notes
* **Shallow Comparison**: By default, `React.memo` performs shallow comparison, which means it only compares the first-level content of `props`. Nested objects require custom comparison functions.
* **State and Context**: `React.memo` only focuses on changes in `props`. Changes in the component's internal state and context will not trigger re-renders.
## 5. Differences from `useMemo` and `useCallback`
* **`React.memo`**: Used to memoize the entire component, optimizing component rendering.
* **`useMemo`**: Used to memoize values or computed results inside function components.
* **`useCallback`**: Used to memoize callback functions inside function components, avoiding unnecessary re-creations.
## Example
import React,{ useState, useMemo, useCallback } from 'react';
import ReactDOM from 'react-dom';
const ChildComponent = React.memo(({ onClick, count })=>{
console.log('Rendering ChildComponent');
return;
});
const App =()=>{
const[count, setCount]= useState(0);
const increment = useCallback(()=>{
setCount(count +1);
},);
const doubledCount = useMemo(()=> count *2,);
return(
Doubled Count:{doubledCount}
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
In this example, `useCallback` and `useMemo` are used to optimize functions and computed results, while `React.memo` is used to optimize the rendering of child components.
### Summary
`React.memo` is a powerful tool that can effectively improve the performance of function components by avoiding unnecessary re-renders. By using `React.memo` and custom comparison functions reasonably, you can significantly optimize application performance without affecting the application logic.
YouTip