[hir] Don't track ref.current as a valid dep

2025-11-01 09:12:30 +00:00 · 2023-05-31 13:54:58 +01:00
parent 1d536af4f7
commit bedf0cc6c5
12 changed files with 284 additions and 0 deletions
@@ -979,6 +979,14 @@ export function isPrimitiveType(id: Identifier): boolean {
  return id.type.kind === "Primitive";
 }

+export function isRefValueType(id: Identifier): boolean {
+  return id.type.kind === "Object" && id.type.shapeId === "BuiltInRefValue";
+}
+
+export function isUseRefType(id: Identifier): boolean {
+  return id.type.kind === "Object" && id.type.shapeId === "BuiltInUseRefId";
+}
+
 export function getHookKind(env: Environment, id: Identifier): HookKind | null {
  const idType = id.type;
  if (idType.kind === "Function") {
@@ -11,6 +11,7 @@ import {
  IdentifierId,
  InstructionId,
  InstructionKind,
+  isUseRefType,
  makeInstructionId,
  Place,
  ReactiveFunction,
@@ -314,6 +315,14 @@ class Context {

  // Checks if identifier is a valid dependency in the current scope
  #checkValidDependency(maybeDependency: ReactiveScopeDependency): boolean {
+    // ref.current access is not a valid dep
+    if (
+      isUseRefType(maybeDependency.identifier) &&
+      maybeDependency.path.at(0) === "current"
+    ) {
+      return false;
+    }
+
    const identifier = maybeDependency.identifier;
    // If this operand is used in a scope, has a dynamic value, and was defined
    // before this scope, then its a dependency of the scope.
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current.x;
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { unstable_useMemoCache as useMemoCache } from "react";
+function VideoTab() {
+  const $ = useMemoCache(3);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      ref.current.x;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const c_1 = $[1] !== x;
+  let t1;
+  if (c_1) {
+    t1 = <VideoList videos={x} />;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
@@ -0,0 +1,8 @@
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current.x;
+  };
+
+  return <VideoList videos={x} />;
+}
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Foo({ a }) {
+  const ref = useRef();
+  const x = { a, val: ref.current };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { unstable_useMemoCache as useMemoCache } from "react";
+function Foo(t18) {
+  const $ = useMemoCache(4);
+  const { a } = t18;
+  const ref = useRef();
+  const c_0 = $[0] !== a;
+  let t0;
+  if (c_0) {
+    t0 = { a, val: ref.current };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  const c_2 = $[2] !== x;
+  let t1;
+  if (c_2) {
+    t1 = <VideoList videos={x} />;
+    $[2] = x;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
@@ -0,0 +1,6 @@
+function Foo({ a }) {
+  const ref = useRef();
+  const x = { a, val: ref.current };
+
+  return <VideoList videos={x} />;
+}
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current;
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { unstable_useMemoCache as useMemoCache } from "react";
+function VideoTab() {
+  const $ = useMemoCache(3);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      ref.current;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const c_1 = $[1] !== x;
+  let t1;
+  if (c_1) {
+    t1 = <VideoList videos={x} />;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
@@ -0,0 +1,8 @@
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current;
+  };
+
+  return <VideoList videos={x} />;
+}
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current?.x;
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { unstable_useMemoCache as useMemoCache } from "react";
+function VideoTab() {
+  const $ = useMemoCache(3);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      ref.current?.x;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const c_1 = $[1] !== x;
+  let t1;
+  if (c_1) {
+    t1 = <VideoList videos={x} />;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
@@ -0,0 +1,8 @@
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current?.x;
+  };
+
+  return <VideoList videos={x} />;
+}
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current = 1;
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { unstable_useMemoCache as useMemoCache } from "react";
+function VideoTab() {
+  const $ = useMemoCache(3);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      ref.current = 1;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const c_1 = $[1] !== x;
+  let t1;
+  if (c_1) {
+    t1 = <VideoList videos={x} />;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
@@ -0,0 +1,8 @@
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current = 1;
+  };
+
+  return <VideoList videos={x} />;
+}