How to use React's built-in React.memo comparison function?

Question

I want to check whether a certain prop changed manually, then use React's built-in comparison function for the other props. Eg:

React.memo(
  () => <div />,
  (prevProps, nextProps) => {
    if (!nextProps.visible) {
      return true;
    }
    return React.shallowCompare(prevProps, nextProps);
  },
);

I can easily write my own comparison function or copy/paste from React's source, but if React changes their default comparison function then I'd have to manually change my function too. Is there a way to use React's built-in comparison function for React.memo ?

Also, AFAIK, react-addons-shallow-compare is outdated.

Answer 1

Unfortunately, no. React defaults to shallowEqual in the event you don't provide a compare function, but there isn't additional logic for using the default behavior if you return anything special (eg return null ).

React's usage :

const prevProps = currentChild.memoizedProps;
// Default to shallow comparison
let compare = Component.compare;
compare = compare !== null ? compare : shallowEqual;
if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
...

React isn't currently exporting shallowEqual . However, React's documentation states that it only shallow compares, which is unlikely to change much and can be trivially implemented as you know ( example ). I'm assuming this decision is to reduce the API their team exposes to developers.