Next 13 example from docs of Use() together with fetch inside client component fires indefinitely

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000 Binaries: Node: 19.0.0 npm: 8.19.2 Yarn: 1.22.19 pnpm: N/A Relevant packages: next: 13.0.1-canary.4 eslint-config-next: N/A react: 18.3.0-next-2ac77aab9-20221029 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next dev

Describe the Bug

When following the example provided in the docs for fetching data inside a client component using the new Use() hook. The fetch function falls into an infinity loop and fires until the client session(browser tab) is closed.

The endpoint of the fetch also gets hit infinity amount of times as well as can be seen in the stackblitz provided. A simple counter in the pages/api/hello.ts file that increments and logs on each hit. This was additionally tested with a simple node server with the same result. (so not unique to when fetching from a next api endpoint)

Expected Behavior

For the Use() hook to fire the fetch function once.

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-snerz6?file=app/page.tsx

To Reproduce

Run next dev and go to the / page. See the api hits in the log. ctrl+c in the terminal to stop.

[himyjan]

@SimonProper

'use client';

import { use } from 'react';

async function getData() {
  const res = await fetch('/api/hello');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  console.log('fetching');
  return res.json();
}

const dataPromise = getData();

export default function Page() {
  const name = use(dataPromise);

  return '...';
}

cache fetch promise with variable can fix use() hook loop;

or try query client custom function in video

new youtube video code fix

NextJS 13 WARNING: Easy Mistake = Infinite Loops

https://youtu.be/zwQs4wXr9Bg?t=531

[SimonProper]

Sadly it doesn’t affect this case, if you look in the app/page.tsx file, the fetch is already inside a separate async function outside the component.

This is also copied directly from the docs (with the exception for the added console.log() ) so it should behave correctly.