Misleading error description when using wrong useRef

[madroneropaulo]

There's a misleading error when using wrong the useRef hook.

function MyComponent() {
    let nameRef = useRef();

   return (
      <div>
        <input ref="nameRef" type="text" />       
    </div>
  );
}

See the example here https://codesandbox.io/s/yvl21qm62j

The code above leads to this error Function components cannot have refs. Did you mean to use React.forwardRef()?. I'm moving some class components to Hooks, and stumbled upon this, and it took me a while due to the wrong error message.

[gaearon]

Runnable example please? Such as CodeSandbox.

[madroneropaulo]

@gaearon Just updated the post.

[huubvKaopiz]

ref="nameRef" => ref={nameRef}

[tiendo1011]

@huubvKaopiz He already knows how to fix it. This error looks misleading to me, too.

[threepointone]

Huh, it looks like the issue shows up even without useRef, by simply using a string ref on <input/>. This looks like an actual bug.

[natejcho]

What about an error message like "Function components cannot have string refs. Did you mean to use React.useRef()?

[natejcho]

To be clear, this would only be if a function component uses a string ref.

i think the initial error still has use

[klujanrosas]

@threepointone I experienced this today as well when trying to conditionally pass a ref like

function MyApp() {
  const ref = React.useRef();
  const someCondition = false;

  return <div ref={someCondition && ref} />
}

I believe React is right on throwing the error, but the message is indeed a bit misleading.

Would it be a possibility to exclude/handle boolean types from coerceRef here?

react/packages/react-reconciler/src/ReactChildFiber.js

Lines 112 to 116 in 54f6673

	if (
	mixedRef !== null &&
	typeof mixedRef !== 'function' &&
	typeof mixedRef !== 'object'
	) {

Repro:
https://codesandbox.io/s/misleading-ref-error-rc2ed

[lynellf]

I do agree in which the error is misleading or outdated. Prior to hooks, using refs wasn't possible?

So, this error isn't about "Function components cannot have refs", but rather there's an invalid configuration?

[okmttdhr]

This issue seems to be solved by #18031

[eps1lon]

Closed by #18031