Summary

Fixes #37521. Previously, strict equality comparisons (ie. === or !==) with ref-accessing callback functions as operands would be flagged by ESLint as accessing ref values at render time. Since strict equality comparisons don't call the operand functions, it is safe to perform these comparisons at render time, so I add narrow support to === and !==, while still rejecting operands read from ref.current. In the future, this could be expanded to include typeof and other checks as well. I also added 8 tests for thoroughness:

4 compiler fixtures, each with a generated .expect.md snapshot:

• Safe strict comparisons of callbacks, including aliases and conditional selection.
• Comparisons involving actual ref values still warn.
• Calling ref-accessing callbacks inside comparisons still warns.
• Loose comparisons retain existing warnings.

4 ESLint 8 integration cases:

• The issue’s TypeScript reproduction produces no warning.
• Comparing a ref value warns.
• Comparing a function read from a ref warns.
• Calling a ref-accessing callback in a comparison warns.

How did you test this change?

All tests pass, yarn passes, yarn flow dom-node passes. I also added a specific regression test for this change, which runs something similar to this:

import {useRef} from 'react';

function Component({previous}) {
  const ref = useRef(0);
  const callback = () => ++ref.current;

  return callback !== previous;
}

Previously, this would be flagged by ESLint. You can run this yourself by running:

cd compiler
yarn snap -p '*ref*comparison*'

# ESLint integration tests
cd ../packages/eslint-plugin-react-hooks
yarn test ReactCompilerRuleTypescript --runInBand