[compiler] Don’t treat JSX prop callbacks as render-invoked

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

@@ -759,19 +759,11 @@ function getAssumedInvokedFunctions(
         }
       } else if (value.kind === 'JsxExpression') {
         /**
-         * Assume JSX attributes and children are safe to invoke
+         * The JSX tag is invoked during render, but props and children may be
+         * event handlers or opaque values that are only consumed later.
          */
-        for (const attr of value.props) {
-          if (attr.kind === 'JsxSpreadAttribute') {
-            continue;
-          }
-          const maybeLoweredFunc = temporaries.get(attr.place.identifier.id);
-          if (maybeLoweredFunc != null) {
-            hoistableFunctions.add(maybeLoweredFunc.fn);
-          }
-        }
-        for (const child of value.children ?? []) {
-          const maybeLoweredFunc = temporaries.get(child.identifier.id);
+        if (value.tag.kind === 'Identifier') {
+          const maybeLoweredFunc = temporaries.get(value.tag.identifier.id);
           if (maybeLoweredFunc != null) {
             hoistableFunctions.add(maybeLoweredFunc.fn);
           }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-non-null-assertion-disabled-callback.expect.md

@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function Component({test}: {test: null | {value: string}}) {
+  return (
+    <button disabled={!test} onClick={() => console.log(test!.value)}>
+      Print
+    </button>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(5);
+  const { test } = t0;
+
+  const t1 = !test;
+  let t2;
+  if ($[0] !== test) {
+    t2 = () => console.log(test.value);
+    $[0] = test;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== t1 || $[3] !== t2) {
+    t3 = (
+      <button disabled={t1} onClick={t2}>
+        Print
+      </button>
+    );
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ test: null }],
+};
+
+```
+
+### Eval output
+(kind: ok) <button disabled="">Print</button>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-non-null-assertion-disabled-callback.tsx

@@ -0,0 +1,12 @@
+function Component({test}: {test: null | {value: string}}) {
+  return (
+    <button disabled={!test} onClick={() => console.log(test!.value)}>
+      Print
+    </button>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: null}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-maybe-mutate-context-in-callback.expect.md

@@ -41,11 +41,11 @@ function Component(props) {
   const $ = _c(5);
   const Foo = useContext(FooContext);
   let t0;
-  if ($[0] !== Foo.current) {
+  if ($[0] !== Foo) {
     t0 = () => {
       mutate(Foo.current);
     };
-    $[0] = Foo.current;
+    $[0] = Foo;
     $[1] = t0;
   } else {
     t0 = $[1];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback.expect.md

@@ -34,11 +34,11 @@ function Component(props) {
   const $ = _c(5);
   const foo = useContext(FooContext);
   let t0;
-  if ($[0] !== foo.current) {
+  if ($[0] !== foo) {
     t0 = () => {
       console.log(foo.current);
     };
-    $[0] = foo.current;
+    $[0] = foo;
     $[1] = t0;
   } else {
     t0 = $[1];