I want to check whether a certain prop changed manually, then use React's built-in parison 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 parison function or copy/paste from React's source, but if React changes their default parison function then I'd have to manually change my function too. Is there a way to use React's built-in parison function for React.memo?

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

I want to check whether a certain prop changed manually, then use React's built-in parison 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 parison function or copy/paste from React's source, but if React changes their default parison function then I'd have to manually change my function too. Is there a way to use React's built-in parison function for React.memo?

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

• javascript
• reactjs

Share Improve this question Follow asked Jul 13, 2020 at 3:40 Leo JiangLeo Jiang 26.3k5959 gold badges177177 silver badges328328 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Unfortunately, no. React defaults to shallowEqual in the event you don't provide a pare 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 parison
let pare = Component.pare;
pare = pare !== null ? pare : shallowEqual;
if (pare(prevProps, nextProps) && current.ref === workInProgress.ref) {
...

React isn't currently exporting shallowEqual. However, React's documentation states that it only shallow pares, 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.