[Compiler Bug]: babel plugin and eslint plugin seemingly inconsistent

[phryneas]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://github.com/apollographql/apollo-client/blob/449c3ea07e638f71bbf0923bfca6de901bfc6ec6/src/react/hooks/internal/useDeepMemo.ts

Repro steps

Take this code:

import { equal } from "@wry/equality";
import type { DependencyList } from "react";
import * as React from "react";

export function useDeepMemo<TValue>(
  memoFn: () => TValue,
  deps: DependencyList
) {
  const ref = React.useRef<{ deps: DependencyList; value: TValue }>(void 0);
  if (!ref.current || !equal(ref.current.deps, deps)) {
    ref.current = { value: memoFn(), deps };
  }
  return ref.current.value;
}

In ESlint, this does not report any errors - but it should (and did in the past).

I would expect these errors, which I do get during compilation:

Error in src/react/hooks/internal/useDeepMemo.ts:10:7 {
  reason: 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
  description: null,
  severity: 'InvalidReact',
  suggestions: null
}
Error in src/react/hooks/internal/useDeepMemo.ts:10:29 {
  reason: 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
  description: null,
  severity: 'InvalidReact',
  suggestions: null
}
Error in src/react/hooks/internal/useDeepMemo.ts:11:4 {
  reason: 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
  description: null,
  severity: 'InvalidReact',
  suggestions: null
}
Error in src/react/hooks/internal/useDeepMemo.ts:13:9 {
  reason: 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
  description: null,
  severity: 'InvalidReact',
  suggestions: null
}

How often does this bug happen?

Every time

What version of React are you using?

"eslint-plugin-react-compiler": "19.1.0-rc.2",

What version of React Compiler are you using?

"babel-plugin-react-compiler": "19.1.0-rc.2",

[josephsavona]

Thanks for posting. There are some known issues with our ref validation, where it is sometimes a bit too aggressive about reporting ref-in-render access. However, the compiler relies on this validation to ensure it doesn't produce unsafe code. So for now, we don't report ref-in-render errors in the linter but we do enable this in the compiler to help avoid breaking code.

This is on our list to address before stable.

[phryneas]

Okay, thank you for the clarification @josephsavona !

Should I keep this issue open for now or close it as you probably already track this elsewhere?

[josephsavona]

Let's keep it open for tracking purposes