test: e2e test for 2702 (vercel#4154)

Author: promer94

.eslintrc

@@ -31,20 +31,31 @@
     "node": true,
     "jest": true
   },
+  "overrides": [
+    {
+      "files": ["e2e/**/*.ts"],
+      "rules": {
+        "testing-library/prefer-screen-queries": "off"
+      }
+    }
+  ],
   "rules": {
     "func-names": [2, "as-needed"],
     "no-shadow": 0,
     "@typescript-eslint/no-shadow": 2,
     "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/no-unused-vars": [0, {"argsIgnorePattern": "^_"}],
+    "@typescript-eslint/no-unused-vars": [0, { "argsIgnorePattern": "^_" }],
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/ban-ts-ignore": 0,
     "@typescript-eslint/no-empty-function": 0,
     "@typescript-eslint/ban-ts-comment": 0,
     "@typescript-eslint/no-var-requires": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/consistent-type-imports": [2, {"prefer": "type-imports"}],
+    "@typescript-eslint/consistent-type-imports": [
+      2,
+      { "prefer": "type-imports" }
+    ],
     "@typescript-eslint/ban-types": 0,
     "react-hooks/rules-of-hooks": 2,
     "react-hooks/exhaustive-deps": 1,

e2e/site/app/issue-2702/page.tsx

@@ -0,0 +1,9 @@
+import Comp from './reproduction'
+
+export default function Page() {
+  return (
+    <div>
+      <Comp></Comp>
+    </div>
+  )
+}

e2e/site/app/issue-2702/reproduction.tsx

@@ -0,0 +1,41 @@
+'use client'
+import useSWR, { preload } from 'swr'
+import { Suspense, use, useEffect, useState } from 'react'
+
+const sleep = (time: number, data: string) =>
+  new Promise<string>(resolve => {
+    setTimeout(() => resolve(data), time)
+  })
+
+const Bug = () => {
+  const a = use(preload('a', () => sleep(1000, 'a')))
+  const { data: b } = useSWR('b', () => sleep(2000, 'b'), {
+    suspense: true
+  })
+  useState(b)
+  return (
+    <div>
+      {a},{b}
+    </div>
+  )
+}
+
+const Comp = () => {
+  const [loading, setLoading] = useState(true)
+
+  // To prevent SSR
+  useEffect(() => {
+    setLoading(false)
+  }, [])
+
+  if (loading) {
+    return <span>Loading...</span>
+  }
+  return (
+    <Suspense fallback={<div>fetching</div>}>
+      <Bug></Bug>
+    </Suspense>
+  )
+}
+
+export default Comp

e2e/test/issue-2702-too-many-hooks.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('issue 2702', () => {
+  test('should not crash with too many hooks', async ({ page }) => {
+    // Navigate to the test page
+    await page.goto('./issue-2702', { waitUntil: 'networkidle' })
+
+    // Wait for the page to be fully loaded and interactive
+    await expect(page.getByText('fetching')).toBeVisible()
+
+    // Verify that the component renders correctly
+    await expect(page.getByText('a,b')).toBeVisible()
+  })
+})