fix: remove startTransition so mutation hook could update immediate…

…ly (#2654)

* fix: remove startTransition

* chore: bump deps

* test: add mutate server action test

.github/workflows/test-release.yml

@@ -27,7 +27,7 @@ jobs:
   e2e:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.33.0-focal
+      image: mcr.microsoft.com/playwright:v1.34.3-focal
     steps:
       - name: Checkout
         uses: actions/checkout@v3

_internal/utils/state.ts

@@ -1,7 +1,6 @@
 import type { MutableRefObject } from 'react'
-import React, { useRef, useCallback, useState } from 'react'
-
-import { useIsomorphicLayoutEffect, IS_REACT_LEGACY } from './env'
+import { useRef, useCallback, useState } from 'react'
+import { useIsomorphicLayoutEffect } from './env'
 
 /**
  * An implementation of state with dependency-tracking.
@@ -66,16 +65,10 @@ export const useStateWithDeps = <S = any>(
       }
 
       if (shouldRerender && !unmountedRef.current) {
-        if (IS_REACT_LEGACY) {
-          rerender({})
-        } else {
-          ;(React as any).startTransition(() => rerender({}))
-        }
+        rerender({})
       }
     },
-    // config.suspense isn't allowed to change during the lifecycle
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [rerender]
   )
 
   useIsomorphicLayoutEffect(() => {

e2e/site/app/mutate-server-action/action.tsx

@@ -0,0 +1,14 @@
+'use server'
+
+export async function action(): Promise<{ result: number }> {
+  await sleep(500)
+  return { result: 10086 }
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve()
+    }, ms)
+  })
+}

e2e/site/app/mutate-server-action/page.tsx

@@ -0,0 +1,19 @@
+'use client'
+import useSWRMutation from 'swr/mutation'
+import { action } from './action'
+
+const useServerActionMutation = () =>
+  useSWRMutation('/api/mutate-server-action', () => action())
+
+const Page = () => {
+  const { trigger, data, isMutating } = useServerActionMutation()
+  return (
+    <div>
+      <button onClick={() => trigger()}>mutate</button>
+      <div>isMutating: {isMutating.toString()}</div>
+      <div>data: {data?.result}</div>
+    </div>
+  )
+}
+
+export default Page

e2e/site/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

e2e/site/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
-    appDir: true,
+    serverActions: true,
   },
 }
 

e2e/site/package.json

@@ -9,14 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@next/font": "13.1.6",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "18.0.10",
-    "next": "^13.1.6",
+    "@types/node": "^20.2.5",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "18.2.4",
+    "next": "^13.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "4.9.4",
+    "typescript": "5.1.3",
     "swr": "*"
   }
 }

e2e/test/mutate-server-action.test.ts

@@ -0,0 +1,12 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+import { test, expect } from '@playwright/test'
+
+test('mutate-server-action', async ({ page }) => {
+  await page.goto('./mutate-server-action')
+  await page.getByRole('button', { name: 'mutate' }).click()
+  await expect(page.getByText('isMutating: true')).toBeVisible()
+  await expect(page.getByText('data: ')).toBeVisible()
+  await page.waitForTimeout(500)
+  await expect(page.getByText('isMutating: false')).toBeVisible()
+  await expect(page.getByText('data: 10086')).toBeVisible()
+})

package.json

@@ -99,37 +99,37 @@
     ]
   },
   "devDependencies": {
-    "@playwright/test": "^1.33.0",
-    "@swc/core": "^1.3.56",
+    "@playwright/test": "^1.34.3",
+    "@swc/core": "^1.3.62",
     "@swc/jest": "0.2.26",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@type-challenges/utils": "0.1.1",
-    "@types/jest": "^29.5.1",
-    "@types/node": "^18.16.3",
-    "@types/react": "^18.2.5",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^20.2.5",
+    "@types/react": "^18.2.8",
     "@types/use-sync-external-store": "^0.0.3",
-    "@typescript-eslint/eslint-plugin": "5.59.2",
-    "@typescript-eslint/parser": "5.59.2",
-    "bunchee": "3.1.1",
-    "eslint": "8.39.0",
+    "@typescript-eslint/eslint-plugin": "5.59.8",
+    "@typescript-eslint/parser": "5.59.8",
+    "bunchee": "3.2.0",
+    "eslint": "8.42.0",
     "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-jest-dom": "4.0.3",
+    "eslint-plugin-jest-dom": "5.0.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-testing-library": "5.10.3",
+    "eslint-plugin-testing-library": "5.11.0",
     "husky": "8.0.3",
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
     "lint-staged": "13.2.2",
-    "next": "^13.3.4",
+    "next": "^13.4.4",
     "prettier": "2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "5.0.0",
+    "rimraf": "5.0.1",
     "semver": "^7.5.1",
     "swr": "workspace:*",
-    "typescript": "5.0.4"
+    "typescript": "5.1.3"
   },
   "peerDependencies": {
     "react": "^16.11.0 || ^17.0.0 || ^18.0.0"