技术疑问：React.memo与recompose pure()是否完全等同？

Great question! Let’s break down how these two performance optimization tools compare, including their similarities, key differences, and which one you should prefer.

Similarities #

• Both are Higher-Order Components (HOCs) built to stop unnecessary component re-renders.
• They rely on shallow prop comparison by default: if the component’s props don’t change (when checked shallowly), the component skips re-rendering.
• For basic use cases, they behave exactly the same—just like your examples demonstrate:

  // Using recompose's pure()
  import { pure } from 'recompose';
  export default pure(MyComp);
  
  // Using React.memo
  import React, { memo } from 'react';
  export default memo(MyComp);
  

Key Differences #

• Official vs. Third-Party: React.memo is a native React API, so you don’t need to install any extra libraries to use it. pure() comes from the recompose library, which is no longer actively maintained (the project has been archived).
• Custom Comparison Flexibility: React.memo lets you pass an optional second argument to define a custom prop comparison function. This is perfect for cases where shallow comparison isn’t enough:

  const arePropsEqual = (prevProps, nextProps) => {
    // Custom logic to check if props are equivalent
    return prevProps.user.id === nextProps.user.id;
  };
  
  export default memo(MyComp, arePropsEqual);
  

  Recompose’s pure() doesn’t support this—it only uses the default shallow comparison with no way to override it.
• Component Type Focus: While both work with function components, React.memo is specifically designed for function components (class components have PureComponent for the same optimization). Recompose’s pure() works with both class and function components, but this is less relevant now that React has native solutions for both.

Recommendation #

Since recompose is unmaintained and React.memo is the official, supported way to optimize function components, it’s better to use React.memo for new projects. It’s more flexible, aligns with React’s modern API, and avoids adding unnecessary dependencies to your codebase.

内容的提问来源于stack exchange，提问作者Ricardo Daniel