rule to ensure forwardRef includes a ref argument.

[jquense]

Howdy, not sure if this is a question or suggestion for a new rule, but i've not managed to find an existing rule to cover it.

But i'd like to find a rule that flags the following as an error, because the ref argument is not present.

import { forwardRef } from 'react';

const Button = forwardRef(props => <button {...props} />)

Whether or not the ref is used is already handled by no-unused-vars.

[ljharb]

That seems like a useful thing to validate. Would the fix be "force use of a ref", or would it be "make it a functional component instead"? The latter seems to make sense to me - an autofix for that would be pretty aggressive in development though, altho a suggestion could work.

I am hesitant to add a whole new rule just for that one thing, but there's not really another place to put it. Thoughts?

[jquense]

Would the fix be "force use of a ref", or would it be "make it a functional component instead"? The latter seems to make sense to me - an autofix for that would be pretty aggressive in development though, altho a suggestion could work

IME this is less often a "I used forwardRef without intending to" vs "I intended to pass a ref through but forgot". I agree an autofix would be aggressive and probably frustrating in development.

I am hesitant to add a whole new rule just for that one thing

yeah its a small thing, I can't really think of a good alternative place though. Maybe it's not so bad as it's own rule though, a number of the existing rules are narrowly scoped.

[ljharb]

alrighty, why not - let's add a forward-ref-uses-ref rule. It should not autofix, but it should offer two suggestions if possible:

1. just a component, not a forwardRef
2. add the ref argument and also attach it to the primary returned jsx element