[compiler] Infer types for properties after holes in array patterns (#34847)

In InferTypes when we infer types for properties during destructuring,
we were breaking out of the loop when we encounter a hole in the array.
Instead we should just skip that element and continue inferring later
properties.

Closes #34748

---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34847).
* #34855
* __->__ #34847

Author: josephsavona

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

@@ -393,7 +393,7 @@ function* generateInstructionTypes(
               shapeId: BuiltInArrayId,
             });
           } else {
-            break;
+            continue;
           }
         }
       } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md

@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // Intentionally don't bind state, this repros a bug where we didn't
+  // infer the type of destructured properties after a hole in the array
+  let [, setState] = useState();
+  setState(1);
+  return props.foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Calling setState during render may trigger an infinite loop
+
+Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).
+
+error.invalid-setState-in-render-unbound-state.ts:5:2
+  3 |   // infer the type of destructured properties after a hole in the array
+  4 |   let [, setState] = useState();
+> 5 |   setState(1);
+    |   ^^^^^^^^ Found setState() in render
+  6 |   return props.foo;
+  7 | }
+  8 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js

@@ -0,0 +1,13 @@
+function Component(props) {
+  // Intentionally don't bind state, this repros a bug where we didn't
+  // infer the type of destructured properties after a hole in the array
+  let [, setState] = useState();
+  setState(1);
+  return props.foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};

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

@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [, /* isPending intentionally not captured */ start] = useTransition();
+
+  return useCallback(() => {
+    start();
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useTransition } from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const [, start] = useTransition();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      start();
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js

@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [, /* isPending intentionally not captured */ start] = useTransition();
+
+  return useCallback(() => {
+    start();
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md

@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [, /* state value intentionally not captured */ setState] = useState();
+
+  return useCallback(() => {
+    setState(x => x + 1);
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useTransition } from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const [, setState] = useState();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState(_temp);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp(x) {
+  return x + 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: exception) useState is not defined

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js

@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [, /* state value intentionally not captured */ setState] = useState();
+
+  return useCallback(() => {
+    setState(x => x + 1);
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};