Memo + ForwardRef = false positive?

Eslint complains about myProp being missing in prop validation when a forwardRef’d component is memoized.

const myComponent = memo(forwardRef( ({ myProp }, ref) => {
....
}

If I add myProp to prop validation.

const myComponent = ({ myProp }, ref) => {
....
}
myComponent.propTypes = { myProp: PropTypes.number.isRequired }
default export memo(forwardRef(myComponent));

Then eslint stops complaining, but now the site wont render:

Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

Is there someway to use memo and forwardRef that eslint doesn’t complain about?

[yannickcr]

Having multiple wrapper was not supported, it should be fixed in v7.14.3. Thanks for the report 🙂

Also you must add the propTypes to the final component:

const myComponent =  memo(forwardRef(({ myProp }, ref) => {
  // ...
}))
myComponent.propTypes = { myProp: PropTypes.number.isRequired }
default export myComponent;

[ljharb]

If it only happens with the combination - ie, with memo and forwardRef, but not just with forwardRef - then it’s definitely a bug.