next.js/test/development/app-dir/use-cache-errors/use-cache-errors.test.ts at release-app-smoke-test/new-release-flow

mirror of https://github.com/hanzoai/next.js.git synced 2026-09-24 17:00:51 +00:00

Files

T

Hendrik LiebauandGitHub b6a7714057 Hoist inner 'use cache' functions to reduce function allocations (#85904 )

This PR fixes a slight performance regression introduced in #85519 where
inline async function expressions were created for each unique set of
arguments passed to a `'use cache'` function.

For a function like this:

```js
export async function getCachedData(id) {
  'use cache';
  return fetch(`/api/data/${id}`);
}
```

we were previously generating (simplified):

```js
export var $$RSC_SERVER_CACHE_0 = cache("default", "0815", 0, async function(id) {
  return fetch(`/api/data/${id}`);
});
```

In #85519, we restructured this to ensure proper stack frames in error
messages (simplified):

```js
export var $$RSC_SERVER_CACHE_0 = React.cache(function getCachedData() {
  return cache("default", "0815", 0, async function(id) {
    return fetch(`/api/data/${id}`);
  }, arguments);
});
```

However, this introduced a small performance issue: the inner async
function expression was passed inline to the cache wrapper. While
`React.cache` memoizes the outer function, each unique set of arguments
would cause a new inner function object to be allocated.

Now we're generating (simplified):

```js
const $$RSC_SERVER_CACHE_0_INNER = async function getCachedData(id) {
  return fetch(`/api/data/${id}`);
};

export var $$RSC_SERVER_CACHE_0 = React.cache(function getCachedData() {
  return cache("default", "0815", 0, $$RSC_SERVER_CACHE_0_INNER, arguments);
});
```

The cache implementation is now hoisted to module scope with an `_INNER`
suffix as a const declaration with a named function expression. The
function name is preserved to ensure proper stack traces in dev. This
eliminates the repeated function allocations while preserving the
improvements from #85519.

2025-11-10 13:09:59 +01:00

121 lines

4.3 KiB

TypeScript

Raw Permalink Blame History

 import { nextTestSetup } from 'e2e-utils'
 import { waitForNoRedbox } from '../../../lib/next-test-utils'
 const cacheComponentsEnabled = process.env.__NEXT_CACHE_COMPONENTS === 'true'
 describe('use-cache-errors', () => {
   const { next, isRspack, isTurbopack } = nextTestSetup({
     files: __dirname,
   })
   it('should not show a false-positive compiler error about a misplaced "use cache" directive', async () => {
     // This is a regression test to ensure that an injected React Refresh
     // statement (`var _s = __turbopack_context__.k.signature`) does not
     // interfere with our "use cache" directive misplacement detection.
     const browser = await next.browser('/')
     await waitForNoRedbox(browser)
   })
   it('should show a runtime error when calling the incorrectly used cache function', async () => {
     const browser = await next.browser('/')
     await browser.elementById('action-button').click()
     if (isRspack) {
       // TODO: the source is missing and the stack leaks rspack internals
       await expect(browser).toDisplayRedbox(`
        {
          "description": "Attempted to call useStuff() from the server but useStuff is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
          "environmentLabel": "Cache",
          "label": "Runtime Error",
          "source": null,
          "stack": [
            "<FIXME-file-protocol>",
            "useCachedStuff about:/Cache/webpack-internal:///(action-browser)/app/module-with-use-cache.ts (25:68)",
            "Page ./app/page.tsx",
          ],
        }
       `)
     } else {
       await expect(browser).toDisplayRedbox(`
        {
          "description": "Attempted to call useStuff() from the server but useStuff is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
          "environmentLabel": "Cache",
          "label": "Runtime Error",
          "source": "app/module-with-use-cache.ts (16:18) @ useCachedStuff
        > 16 |   return useStuff()
             |                  ^",
          "stack": [
            "useCachedStuff app/module-with-use-cache.ts (16:18)",
            "Page app/page.tsx (22:10)",
          ],
        }
       `)
     }
   })
   it('should not leak generated internal cache function names in call stacks', async () => {
     const browser = await next.browser('/anonymous')
     if (cacheComponentsEnabled) {
       if (isTurbopack) {
         await expect(browser).toDisplayRedbox(`
          {
            "description": "kaputt!",
            "environmentLabel": "Prerender",
            "label": "Runtime Error",
            "source": "app/anonymous/page.tsx (4:11) @ <anonymous>
          > 4 |     throw new Error('kaputt!')
              |           ^",
            "stack": [
              "<anonymous> app/anonymous/page.tsx (4:11)",
            ],
          }
         `)
       } else {
         await expect(browser).toDisplayRedbox(`
          {
            "description": "kaputt!",
            "environmentLabel": "Prerender",
            "label": "Runtime Error",
            "source": "app/anonymous/page.tsx (4:11) @ eval
          > 4 |     throw new Error('kaputt!')
              |           ^",
            "stack": [
              "eval app/anonymous/page.tsx (4:11)",
            ],
          }
         `)
       }
     } else {
       if (isTurbopack) {
         await expect(browser).toDisplayRedbox(`
          {
            "description": "kaputt!",
            "environmentLabel": "Cache",
            "label": "Runtime Error",
            "source": "app/anonymous/page.tsx (4:11) @ <anonymous>
          > 4 |     throw new Error('kaputt!')
              |           ^",
            "stack": [
              "<anonymous> app/anonymous/page.tsx (4:11)",
            ],
          }
         `)
       } else {
         await expect(browser).toDisplayRedbox(`
          {
            "description": "kaputt!",
            "environmentLabel": "Cache",
            "label": "Runtime Error",
            "source": "app/anonymous/page.tsx (4:11) @ eval
          > 4 |     throw new Error('kaputt!')
              |           ^",
            "stack": [
              "eval app/anonymous/page.tsx (4:11)",
            ],
          }
         `)
       }
     }
   })
 })

121 lines 4.3 KiB TypeScript Raw Permalink Blame History

121 lines

4.3 KiB

TypeScript

Raw Permalink Blame History