Memo + ForwardRef = false positive?

[BjornThorsson]

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?

[ljharb]

forwardRef callbacks aren’t components and don’t take props or propTypes - if you have a forwardRef, why isn't it using the ref argument?

[BjornThorsson]

forwardRef callbacks aren’t components and don’t take props or propTypes - if you have a forwardRef, why isn't it using the ref argument?

Whoops, you're right, forgot the 2nd param "Ref" for this example. Fixed.

I realized that forwardRef'd components don't have propTypes, what I'm saying is Eslint complains if I don't validate props using propTypes when I have a memoized forwardRef. If fowardRef doesn't have propTypes then a memoized forwardRef shouldnt either, yet eslint want's me to add propTypes to it.
Hence why i think this is a false positive.

[ljharb]

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

[BjornThorsson]

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

That's what i thought.

[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;

[BjornThorsson]

Thanks for the report

Thanks for the fix!