[compiler] Detect snake_case_ref as a ref-like name

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

@@ -595,7 +595,7 @@ export const EnvironmentConfigSchema = z.object({
   enableCustomTypeDefinitionForReanimated: z.boolean().default(false),
 
   /**
-   * If specified, this value is used as a pattern for determing which global values should be
+   * If specified, this value is used as a pattern for determining which global values should be
    * treated as hooks. The pattern should have a single capture group, which will be used as
    * the hook name for the purposes of resolving hook definitions (for builtin hooks)_.
    *
@@ -608,8 +608,8 @@ export const EnvironmentConfigSchema = z.object({
   hookPattern: z.string().nullable().default(null),
 
   /**
-   * If enabled, this will treat objects named as `ref` or if their names end with the substring `Ref`,
-   * and contain a property named `current`, as React refs.
+   * If enabled, this will treat objects named as `ref` or if their names end with substring `Ref`
+   * or `_ref`, and contain a property named `current`, as React refs.
    *
    * ```
    * const ref = useMyRef();
@@ -620,7 +620,7 @@ export const EnvironmentConfigSchema = z.object({
    * })
    * ```
    *
-   * Here the variables `ref` and `myRef` will be typed as Refs.
+   * Here the variables `ref`, `myRef`, and `my_ref` will be typed as Refs.
    */
   enableTreatRefLikeIdentifiersAsRefs: z.boolean().default(true),
 

compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts

@@ -840,7 +840,7 @@ class Unifier {
   }
 }
 
-const RefLikeNameRE = /^(?:[a-zA-Z$_][a-zA-Z$_0-9]*)Ref$|^ref$/;
+const RefLikeNameRE = /^(?:[a-zA-Z$_][a-zA-Z$_0-9]*)(?:R|_r)ef$|^ref$/;
 
 function isRefLikeName(t: PropType): boolean {
   return (

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-3.expect.md

@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import {useRef, useCallback} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const custom_ref = useCustomRef();
+
+  const onClick = useCallback(() => {
+    custom_ref.current?.click();
+  }, [custom_ref]);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import { useRef, useCallback } from "react";
+
+function useCustomRef() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { click: _temp };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return useRef(t0);
+}
+function _temp() {}
+
+function Foo() {
+  const $ = _c(4);
+  const custom_ref = useCustomRef();
+  let t0;
+  if ($[0] !== custom_ref) {
+    t0 = () => {
+      custom_ref.current?.click();
+    };
+    $[0] = custom_ref;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[2] !== onClick) {
+    t1 = <button onClick={onClick} />;
+    $[2] = onClick;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+### Eval output
+(kind: ok) <button></button>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-3.js

@@ -0,0 +1,22 @@
+// @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import {useRef, useCallback} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const custom_ref = useCustomRef();
+
+  const onClick = useCallback(() => {
+    custom_ref.current?.click();
+  }, [custom_ref]);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};