React.memo

React.memo is a higher-order component (HOC) provided by React for optimizing performance in functional components. It aims to reduce unnecessary renderings by memorizing the result of a rendered component and reusing it in subsequent renders if the component's props have not changed.

Here’s a deeper dive into how it works and when you might want to use it:

How React.memo Works

• Memorization: React.memo wraps a functional component. React then memorizes the output of the component. The memorization step involves storing the rendered output and the props that were used.
• Props Comparison: On subsequent re-renders, React checks the new props against the previous props. If the props have not changed, React skips rendering the component and reuses the memorized output. This can significantly improve performance, especially for complex components.
• Custom Comparison: By default, React.memo does a shallow comparison of props. However, you can provide a custom comparison function as a second argument to React.memo if you need more control over the comparison. This is useful if your props are complex objects, and you want to implement deeper comparison logic.

When to Use React.memo

• Optimization: Use React.memo for components that render expensive operations (like complex calculations, large lists, etc.), and whose props do not change frequently.
• Pure Components: It is best suited for "pure" components, where the output depends solely on the props. If your component’s rendering depends on global state, context, or if it has side effects (like data fetching), React.memo might not be beneficial.
• Prevent Unnecessary Renders: If your component is often re-rendered with the same props, wrapping it in React.memo can prevent those unnecessary re-renders, improving the app's overall performance.

Example

const MyComponent = React.memo(function MyComponent(props) {
  // Your component code
});

Or with a custom comparison function:

const MyComponent = React.memo(
  function MyComponent(props) {
    // Your component code
  },
  (prevProps, nextProps) => {
    // Return true if passing nextProps to render would return
    // the same result as passing prevProps, else return false
  }
);

Limitations

• Shallow Comparison: The default shallow comparison may not be sufficient for complex props. You may need to implement a custom comparison function for deep comparisons.
• Memory Overhead: While React.memo can reduce the number of re-renders, it also adds a memory overhead because it needs to store the memorized outputs. This is typically a worthwhile trade-off but is something to be aware of.

In summary, React.memo is a powerful tool for optimizing functional components in React applications by avoiding unnecessary renders. However, it should be used judiciously and only when performance problems are identified, as it introduces complexity and memory overhead.

React.memo 是 React 提供的一個高階組件（HOC），用於優化功能組件的性能。它通過記憶組件的渲染結果，並在組件的 props 沒有改變時重用這個結果，從而減少不必要的渲染。

下面是關於它的工作原理和你可能想使用它的情況的更深入的解釋：

React.memo 的工作原理

• 記憶化：React.memo 包裝一個函數組件。然後，React 記憶該組件的輸出。記憶步驟包括存儲渲染輸出和被使用的 props。
• Props 比較：在後續的重新渲染中，React 將新的 props 與之前的 props 進行比較。如果 props 沒有改變，React 將跳過渲染該組件並重用記憶的輸出。這可以顯著提高性能，特別是對於複雜的組件。
• 自定義比較：默認情況下，React.memo 進行淺層比較 props。但是，如果你需要更多控制比較的邏輯，你可以為 React.memo 提供一個自定義比較函數作為第二個參數。這在你的 props 是複雜對象，並且你想實現更深層次比較邏輯時非常有用。

何時使用 React.memo

• 優化：對於那些渲染開銷大（如複雜計算、大型列表等）且 props 不經常變化的組件，使用 React.memo。
• 純組件：它最適合“純”組件，其中輸出完全取決於 props。如果你的組件渲染依賴於全局狀態、上下文，或者它有副作用（如數據獲取），React.memo 可能不會有幫助。
• 防止不必要的渲染：如果你的組件經常使用相同的 props 重新渲染，用 React.memo 包裝它可以防止這些不必要的重新渲染，從而提高應用的整體性能。

示例

const MyComponent = React.memo(function MyComponent(props) {
  // 你的組件代碼
});

或者使用自定義比較函數：

const MyComponent = React.memo(
  function MyComponent(props) {
    // 你的組件代碼
  },
  (prevProps, nextProps) => {
    // 如果傳遞 nextProps 渲染將返回與傳遞 prevProps 相同的結果，則返回 true，否則返回 false
  }
);

限制

• 淺層比較：默認的淺層比較可能對複雜的 props 不足夠。你可能需要實現一個自定義比較函數來進行深層比較。
• 內存開銷：雖然 React.memo 可以減少重新渲染的次數，但它也增加了記憶輸出的內存開銷。這通常是一個值得的權衡，但是是需要

Contributors

No contributors

Changelog

No recent changes