Bug: eslint-react-hooks false positives on refs rule

[marcospgp]

after updating eslint-react-hooks from v5 to v6, I'm getting false positives on the rule eslint(react-hooks/refs)

every props.<something> access in the code below is being flagged by this rule, when clearly it is not a ref access.

function FieldInternal(props: FieldBaseProps & { children?: React.ReactNode }) {
  return (
    <F.Root
      name={props.name}
      className="contents"
      validate={(value: unknown) => props.validate?.(value as string) ?? null}
      validationMode={props.validationMode}
    >
      {props.label && <F.Label>{props.label}</F.Label>}
      <div className={`gap-x-sm gap-2xs flex min-w-0 items-start ${props.grow ? "grow" : ""} ${!props.label ? "col-span-2" : ""}`}>
        <div className={`gap-3xs w-md flex min-w-0 flex-col ${props.grow ? "grow" : ""}`}>
          <F.Control
            ref={props.ref}
            placeholder={props.placeholder}
            autoComplete={props.autoComplete}
            autoFocus={props.autoFocus}
            disabled={props.disabled}
            className={`bg-bg-2 px-2xs py-2xs bevel-inset-bg-2 w-full min-w-0 outline-0 data-[disabled]:cursor-not-allowed ${props.disabled && "cursor-not-allowed"}`}
          />
          <F.Error className="text-text-danger min-w-0 text-sm" />
        </div>
        {props.children}
      </div>
    </F.Root>
  );
}

[jeffijoe]

I have a similar issue.

export function DocumentTitleProvider({
  children,
}: DocumentTitleProviderProps) {
  const [value, set] = useState('')
  const currentTitleRef = useRef('')

  const setTitle = useCallback((v: string) => {
    set(v)
    setDocumentTitle(v)
    currentTitleRef.current = v
  }, [])

  const contextValue: DocumentTitleContextValue = useMemo(
    () => ({
      currentTitleRef,
      value,
      set: setTitle,
    }),
    [value, setTitle],
  )

  return (
    <DocumentTitleContext value={contextValue}>
      <ScreenReaderAnnounce text={contextValue.value} />
      {children}
    </DocumentTitleContext>
  )
}

Every contextValue access is redlined with:

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

[TkDodo]

Yep, seeing this too in the sentry codebase. Minimal reproduction:

export function Parent() {
  const ref = useCallback(() => {
    console.log('ref');
  }, []);

  return <Child myRef={ref} className="foo" />;
}

function Child(props: {className: string; myRef: () => void}) {
  const internalRef = useCallback(() => {
    console.log('ref');
  }, []);

  return (
    <div>
      <div ref={internalRef} className={props.className} />
      <div ref={props.myRef} className={props.className} />
    </div>
  );
}

here, the first div:

<div ref={internalRef} className={props.className} />

works fine but the second div that uses the ref from the prop yields not only a false-positive error on ref={props.myRef}, but also on className={props.className}:

[renrizzolo]

playground repro:

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEUYCAsgJ4ASEEA1gBQCURwAOsUXIWDkTARoiAXhJkASkJadORAQhyxiHLvLgAbAIZgwAOS0BbBMiIByHAj5mANHPkK09gL6dXmWZgzZ8hIlQBBAAcgljZPdV5+ADctDSgEUXEKGjomZgiFJRhiAB4AEzxoxxFgWPiEADpBNGdubV0DY1LyhMrNHX0jBDqAegA+N09vXAJiQJCAJjDVSMw+IlbEsVIU2gYZLh55-mBHIjqxJft7QWy8wuKa0pq6jsbulri2+67jPsHMdxAbEG20PAAcxQIDwhiCEBg-BwlCCiT2AAV4oC8JgAPJBXzzA5ENAwCCGcwAIy0RIQGgAtEFkaiKYItLgKTxwXgNAgYL1CtYANyeRizIi9XrMoKsrRY8gQfImIjsEBxDRytxEMDivBgAFWIhIqAo9GYsZgZjcn7gAAWEAA7gBJTCWHJxMAoNCOnpAA

[josephsavona]

Thanks for reporting, I think I know what’s going on. This has to do with the way we’re inferring types that contain refs.

[last-Programmer]

This is causing the react compiler to skip the problem file from compilation. we are getting lots of files skipped from compilation because of this issue.

[dfdeagle47]

A similar issue happens when using this library (https://floating-ui.com/docs/usefloating):

function App() {
  const { refs, floatingStyles } = useFloating();
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

->

Found 1 error:

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  4 |     <>
  5 |       <div ref={refs.setReference} />
> 6 |       <div ref={refs.setFloating} style={floatingStyles} />
    |                 ^^^^^^^^^^^^^^^^ Cannot access ref value during render
  7 |     </>
  8 |   );
  9 | }

This started happening with eslint-plugin-react-hooks@7.0.0.