fix(compiler): use Object.is() for cache dependency comparison to handle NaN

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -577,14 +577,21 @@ function codegenReactiveScope(
 
   for (const dep of [...scope.dependencies].sort(compareScopeDependency)) {
     const index = cx.nextCacheIndex;
-    const comparison = t.binaryExpression(
-      '!==',
-      t.memberExpression(
-        t.identifier(cx.synthesizeName('$')),
-        t.numericLiteral(index),
-        true,
+    // Use Object.is() to correctly handle NaN and -0 comparisons,
+    // consistent with React's runtime hook dependency comparison.
+    const comparison = t.unaryExpression(
+      '!',
+      t.callExpression(
+        t.memberExpression(t.identifier('Object'), t.identifier('is')),
+        [
+          t.memberExpression(
+            t.identifier(cx.synthesizeName('$')),
+            t.numericLiteral(index),
+            true,
+          ),
+          codegenDependency(cx, dep),
+        ],
       ),
-      codegenDependency(cx, dep),
     );
     changeExpressions.push(comparison);
     /*

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md

@@ -20,7 +20,7 @@ import { c as _c } from "react/compiler-runtime";
 function component(a) {
   const $ = _c(2);
   let x;
-  if ($[0] !== a) {
+  if (!Object.is($[0], a)) {
     x = { a };
     const y = {};
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-while.expect.md

@@ -30,7 +30,7 @@ import { c as _c } from "react/compiler-runtime";
 function foo(cond) {
   const $ = _c(2);
   let a;
-  if ($[0] !== cond) {
+  if (!Object.is($[0], cond)) {
     a = {};
     let b = {};
     let c = {};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-fn-expr.expect.md

@@ -83,7 +83,7 @@ function Component(t0) {
   const $ = _c(2);
   const { prop } = t0;
   let t1;
-  if ($[0] !== prop) {
+  if (!Object.is($[0], prop)) {
     const obj = shallowCopy(prop);
     const aliasedObj = identity(obj);
     const getId = () => obj.id;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-truncated-dep.expect.md

@@ -178,7 +178,7 @@ function Component(t0) {
   const $ = _c(2);
   const { prop } = t0;
   let t1;
-  if ($[0] !== prop) {
+  if (!Object.is($[0], prop)) {
     const obj = shallowCopy(prop);
     const aliasedObj = identity(obj);
     const id = [obj.id];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.expect.md

@@ -40,7 +40,7 @@ function useFoo(cond) {
   const $ = _c(3);
   let s;
   let t0;
-  if ($[0] !== cond) {
+  if (!Object.is($[0], cond)) {
     t0 = Symbol.for("react.early_return_sentinel");
     bb0: {
       if (cond) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-iife-return-modified-later-logical.expect.md

@@ -28,7 +28,7 @@ import { getNull } from "shared-runtime";
 function Component(props) {
   const $ = _c(2);
   let items;
-  if ($[0] !== props.a) {
+  if (!Object.is($[0], props.a)) {
     items = getNull() ?? [];
 
     items.push(props.a);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-nested-block-structure.expect.md

@@ -120,7 +120,7 @@ function useFoo(t0) {
   const { cond1, cond2 } = t0;
   let s;
   let t1;
-  if ($[0] !== cond1 || $[1] !== cond2) {
+  if (!Object.is($[0], cond1) || !Object.is($[1], cond2)) {
     t1 = Symbol.for("react.early_return_sentinel");
     bb0: {
       if (cond1) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.expect.md

@@ -46,7 +46,7 @@ function useFoo(t0) {
     t1 = $[0];
   }
   let items = t1;
-  if ($[1] !== cond) {
+  if (!Object.is($[1], cond)) {
     bb0: {
       if (cond) {
         items = [];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-label.expect.md

@@ -40,7 +40,7 @@ function useFoo(t0) {
   const $ = _c(3);
   const { cond, value } = t0;
   let items;
-  if ($[0] !== cond || $[1] !== value) {
+  if (!Object.is($[0], cond) || !Object.is($[1], value)) {
     bb0: {
       items = [];
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.expect.md

@@ -36,7 +36,7 @@ function useFoo(t0) {
   const $ = _c(2);
   const { value } = t0;
   let items;
-  if ($[0] !== value) {
+  if (!Object.is($[0], value)) {
     try {
       items = [];
       arrayPush(items, value);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md

@@ -52,7 +52,7 @@ function Foo(t0) {
   const $ = _c(3);
   const { cond1, cond2 } = t0;
   let t1;
-  if ($[0] !== cond1 || $[1] !== cond2) {
+  if (!Object.is($[0], cond1) || !Object.is($[1], cond2)) {
     const arr = makeArray({ a: 2 }, 2, []);
     t1 = cond1 ? (
       <>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.expect.md

@@ -35,15 +35,15 @@ function Foo() {
   const $ = _c(4);
   const data = useFragment();
   let t0;
-  if ($[0] !== data) {
+  if (!Object.is($[0], data)) {
     t0 = data?.toString() || "";
     $[0] = data;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
   let t1;
-  if ($[2] !== t0) {
+  if (!Object.is($[2], t0)) {
     t1 = [t0];
     $[2] = t0;
     $[3] = t1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep-nested-scope.expect.md

@@ -47,12 +47,12 @@ import { identity, mutate, setProperty } from "shared-runtime";
 function AllocatingPrimitiveAsDepNested(props) {
   const $ = _c(5);
   let t0;
-  if ($[0] !== props.a || $[1] !== props.b) {
+  if (!Object.is($[0], props.a) || !Object.is($[1], props.b)) {
     const x = {};
     mutate(x);
     const t1 = identity(props.b) + 1;
     let t2;
-    if ($[3] !== t1) {
+    if (!Object.is($[3], t1)) {
       t2 = identity(t1);
       $[3] = t1;
       $[4] = t2;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md

@@ -26,7 +26,7 @@ function AllocatingPrimitiveAsDep(props) {
   const $ = _c(2);
   const t0 = bar(props).b + 1;
   let t1;
-  if ($[0] !== t0) {
+  if (!Object.is($[0], t0)) {
     t1 = foo(t0);
     $[0] = t0;
     $[1] = t1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md

@@ -75,7 +75,7 @@ function Component() {
 
   const t4 = String(state);
   let t5;
-  if ($[4] !== t4) {
+  if (!Object.is($[4], t4)) {
     t5 = <div>{t4}</div>;
     $[4] = t4;
     $[5] = t5;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md

@@ -74,7 +74,7 @@ function Component() {
 
   const t4 = String(state);
   let t5;
-  if ($[4] !== t4) {
+  if (!Object.is($[4], t4)) {
     t5 = <div>{t4}</div>;
     $[4] = t4;
     $[5] = t5;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md

@@ -74,7 +74,7 @@ function Component() {
 
   const t4 = String(state);
   let t5;
-  if ($[4] !== t4) {
+  if (!Object.is($[4], t4)) {
     t5 = <div>{t4}</div>;
     $[4] = t4;
     $[5] = t5;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md

@@ -63,7 +63,7 @@ function Component() {
 
   const t3 = String(state);
   let t4;
-  if ($[3] !== t3) {
+  if (!Object.is($[3], t3)) {
     t4 = <div>{t3}</div>;
     $[3] = t3;
     $[4] = t4;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md

@@ -42,7 +42,7 @@ function Component(t0) {
   const $ = _c(4);
   const { value } = t0;
   let t1;
-  if ($[0] !== value) {
+  if (!Object.is($[0], value)) {
     t1 = () => {
       someGlobal.value = value;
     };
@@ -53,7 +53,7 @@ function Component(t0) {
   }
   const onClick = t1;
   let t2;
-  if ($[2] !== onClick) {
+  if (!Object.is($[2], onClick)) {
     t2 = <div onClick={onClick}>{someGlobal.value}</div>;
     $[2] = onClick;
     $[3] = t2;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md

@@ -87,7 +87,7 @@ function Component() {
 
   const t3 = String(state);
   let t4;
-  if ($[3] !== t3) {
+  if (!Object.is($[3], t3)) {
     t4 = <div>{t3}</div>;
     $[3] = t3;
     $[4] = t4;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper-props-object.expect.md

@@ -28,7 +28,7 @@ function Component(props) {
   const T0 = Foo;
   const t0 = props.render({ ref });
   let t1;
-  if ($[0] !== T0 || $[1] !== t0) {
+  if (!Object.is($[0], T0) || !Object.is($[1], t0)) {
     t1 = <T0>{t0}</T0>;
     $[0] = T0;
     $[1] = t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper.expect.md

@@ -25,15 +25,15 @@ function Component(props) {
   const $ = _c(4);
   const ref = useRef(null);
   let t0;
-  if ($[0] !== props.render) {
+  if (!Object.is($[0], props.render)) {
     t0 = props.render(ref);
     $[0] = props.render;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
   let t1;
-  if ($[2] !== t0) {
+  if (!Object.is($[2], t0)) {
     t1 = <Foo>{t0}</Foo>;
     $[2] = t0;
     $[3] = t1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.expect.md

@@ -91,7 +91,7 @@ function Component() {
 
   const t5 = String(state);
   let t6;
-  if ($[5] !== t5) {
+  if (!Object.is($[5], t5)) {
     t6 = <Child key={t5} ref={ref} />;
     $[5] = t5;
     $[6] = t6;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.expect.md

@@ -77,7 +77,7 @@ function Component() {
 
   const t4 = String(state);
   let t5;
-  if ($[4] !== t4) {
+  if (!Object.is($[4], t4)) {
     t5 = <Child key={t4} ref={ref} />;
     $[4] = t4;
     $[5] = t5;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md

@@ -73,7 +73,7 @@ function Component() {
 
   const t3 = String(state);
   let t4;
-  if ($[3] !== t3) {
+  if (!Object.is($[3], t3)) {
     t4 = <Child key={t3} ref={ref} />;
     $[3] = t3;
     $[4] = t4;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-access-assignment.expect.md

@@ -33,10 +33,10 @@ function Component(t0) {
   const $ = _c(6);
   const { a, b, c } = t0;
   let t1;
-  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+  if (!Object.is($[0], a) || !Object.is($[1], b) || !Object.is($[2], c)) {
     const x = [a];
     let t2;
-    if ($[4] !== b) {
+    if (!Object.is($[4], b)) {
       t2 = [null, b];
       $[4] = b;
       $[5] = t2;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.expect.md

@@ -21,7 +21,7 @@ import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(5);
   let t0;
-  if ($[0] !== props.x) {
+  if (!Object.is($[0], props.x)) {
     t0 = foo(props.x);
     $[0] = props.x;
     $[1] = t0;
@@ -30,7 +30,7 @@ function Component(props) {
   }
   const x = t0;
   let t1;
-  if ($[2] !== props || $[3] !== x) {
+  if (!Object.is($[2], props) || !Object.is($[3], x)) {
     const fn = function () {
       const arr = [...bar(props)];
       return arr.at(x);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-effect.expect.md

@@ -24,15 +24,15 @@ import { c as _c } from "react/compiler-runtime"; // arrayInstance.at should hav
 function ArrayAtTest(props) {
   const $ = _c(9);
   let t0;
-  if ($[0] !== props.x) {
+  if (!Object.is($[0], props.x)) {
     t0 = foo(props.x);
     $[0] = props.x;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
   let t1;
-  if ($[2] !== t0) {
+  if (!Object.is($[2], t0)) {
     t1 = [t0];
     $[2] = t0;
     $[3] = t1;
@@ -41,9 +41,9 @@ function ArrayAtTest(props) {
   }
   const arr = t1;
   let t2;
-  if ($[4] !== arr || $[5] !== props.y) {
+  if (!Object.is($[4], arr) || !Object.is($[5], props.y)) {
     let t3;
-    if ($[7] !== props.y) {
+    if (!Object.is($[7], props.y)) {
       t3 = bar(props.y);
       $[7] = props.y;
       $[8] = t3;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md

@@ -23,7 +23,7 @@ import { c as _c } from "react/compiler-runtime"; // x's mutable range should ex
 function Component(props) {
   const $ = _c(2);
   let x;
-  if ($[0] !== props.b) {
+  if (!Object.is($[0], props.b)) {
     x = [42, {}];
     const idx = foo(props.b);
     const y = x.at(idx);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.expect.md

@@ -43,7 +43,7 @@ function Foo(t0) {
   const $ = _c(2);
   const { inputNum } = t0;
   let arr2;
-  if ($[0] !== inputNum) {
+  if (!Object.is($[0], inputNum)) {
     const arr1 = [{ a: 1 }, {}];
     arr2 = arr1.concat([1, inputNum]);
     mutate(arr2[0]);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-expression-spread.expect.md

@@ -22,7 +22,7 @@ import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(3);
   let t0;
-  if ($[0] !== props.bar || $[1] !== props.foo) {
+  if (!Object.is($[0], props.bar) || !Object.is($[1], props.foo)) {
     t0 = [0, ...props.foo, null, ...props.bar, "z"];
     $[0] = props.bar;
     $[1] = props.foo;