[compiler] Extend setState in effect validation to useEffectEvent

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

@@ -2021,6 +2021,11 @@ export function isUseInsertionEffectHookType(id: Identifier): boolean {
     id.type.shapeId === 'BuiltInUseInsertionEffectHook'
   );
 }
+export function isUseEffectEventType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInUseEffectEvent'
+  );
+}
 
 export function isUseContextHookType(id: Identifier): boolean {
   return (

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts

@@ -16,6 +16,7 @@ import {
   IdentifierId,
   isSetStateType,
   isUseEffectHookType,
+  isUseEffectEventType,
   isUseInsertionEffectHookType,
   isUseLayoutEffectHookType,
   isUseRefType,
@@ -98,6 +99,21 @@ export function validateNoSetStateInEffects(
             instr.value.kind === 'MethodCall'
               ? instr.value.receiver
               : instr.value.callee;
+
+          if (isUseEffectEventType(callee.identifier)) {
+            const arg = instr.value.args[0];
+            if (arg !== undefined && arg.kind === 'Identifier') {
+              const setState = setStateFunctions.get(arg.identifier.id);
+              if (setState !== undefined) {
+                /**
+                 * This effect event function calls setState synchonously,
+                 * treat it as a setState function for transitive tracking
+                 */
+                setStateFunctions.set(instr.lvalue.identifier.id, setState);
+              }
+            }
+          }
+
           if (
             isUseEffectHookType(callee.identifier) ||
             isUseLayoutEffectHookType(callee.identifier) ||

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.expect.md

@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects
+import {useEffect, useEffectEvent, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(true);
+  });
+  useEffect(() => {
+    effectEvent();
+  }, []);
+  return state;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateNoSetStateInEffects
+import { useEffect, useEffectEvent, useState } from "react";
+
+function Component() {
+  const $ = _c(4);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState(true);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const effectEvent = useEffectEvent(t0);
+  let t1;
+  if ($[1] !== effectEvent) {
+    t1 = () => {
+      effectEvent();
+    };
+    $[1] = effectEvent;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [];
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  return state;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"EffectSetState","reason":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":10,"column":4,"index":267},"end":{"line":10,"column":15,"index":278},"filename":"invalid-setState-in-useEffect-via-useEffectEvent.ts","identifierName":"effectEvent"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":108},"end":{"line":13,"column":1,"index":309},"filename":"invalid-setState-in-useEffect-via-useEffectEvent.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.js

@@ -0,0 +1,13 @@
+// @loggerTestOnly @validateNoSetStateInEffects
+import {useEffect, useEffectEvent, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(true);
+  });
+  useEffect(() => {
+    effectEvent();
+  }, []);
+  return state;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.expect.md

@@ -0,0 +1,116 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @loggerTestOnly @compilationMode:"infer"
+import {useEffect, useEffectEvent, useState} from 'react';
+
+const shouldSetState = false;
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(10);
+  });
+  useEffect(() => {
+    setTimeout(effectEvent, 10);
+  });
+
+  const effectEventWithTimeout = useEffectEvent(() => {
+    setTimeout(() => {
+      setState(20);
+    }, 10);
+  });
+  useEffect(() => {
+    effectEventWithTimeout();
+  }, []);
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @loggerTestOnly @compilationMode:"infer"
+import { useEffect, useEffectEvent, useState } from "react";
+
+const shouldSetState = false;
+
+function Component() {
+  const $ = _c(7);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState(10);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const effectEvent = useEffectEvent(t0);
+  let t1;
+  if ($[1] !== effectEvent) {
+    t1 = () => {
+      setTimeout(effectEvent, 10);
+    };
+    $[1] = effectEvent;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t1);
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setTimeout(() => {
+        setState(20);
+      }, 10);
+    };
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const effectEventWithTimeout = useEffectEvent(t2);
+  let t3;
+  if ($[4] !== effectEventWithTimeout) {
+    t3 = () => {
+      effectEventWithTimeout();
+    };
+    $[4] = effectEventWithTimeout;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = [];
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  useEffect(t3, t4);
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":164},"end":{"line":24,"column":1,"index":551},"filename":"valid-setState-in-useEffect-via-useEffectEvent-listener.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":5,"memoValues":5,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+
+### Eval output
+(kind: exception) (0 , _react.useEffectEvent) is not a function

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.js

@@ -0,0 +1,29 @@
+// @validateNoSetStateInEffects @loggerTestOnly @compilationMode:"infer"
+import {useEffect, useEffectEvent, useState} from 'react';
+
+const shouldSetState = false;
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(10);
+  });
+  useEffect(() => {
+    setTimeout(effectEvent, 10);
+  });
+
+  const effectEventWithTimeout = useEffectEvent(() => {
+    setTimeout(() => {
+      setState(20);
+    }, 10);
+  });
+  useEffect(() => {
+    effectEventWithTimeout();
+  }, []);
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};