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

user_599184 0
Viewed 2834

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

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.

reactjs javascript
1 Answers

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 (e.g. 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.

user_7245910
Related