fetch requests repeating infinitely & not resolving

[LouisHaftmann]

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:52 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8112
Binaries:
Node: 16.17.1
npm: 8.15.0
Yarn: N/A
pnpm: 7.14.0
Relevant packages:
next: 13.0.0
eslint-config-next: 13.0.0
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

When fetching data with the new use hook the request is repeated infinitely. This problem only occurs in client components.

app/test/TestPage.tsx

'use client'
import type { FC } from 'react'
import { use } from 'react'
import { fetchSalutations } from '@/lib/api'

const TestPage: FC = () => {
  const salutations = use(fetchSalutations())
  return <div>
    {JSON.stringify(salutations, undefined, 2)}
  </div>
}

export default TestPage

app/test/page.tsx

import TestPage from './TestPage'

export default function Test() {
  return <TestPage />
}

Expected Behavior

The request should not get stuck in a loop

Link to reproduction

https://stackblitz.com/edit/nextjs-bf3f3v?file=app/test/TestPage.tsx

To Reproduce

1. Create page in app directory
2. Create a client page component
3. Use use hook with a fetch request inside client page component

[Fredkiss3]

I think you should use the cache api to prevent this, i've just wrapped the fetchData function with the cache function from react and only one network request is made.

import { cache } from 'react';

export const fetchData = cache(() =>
  fetch('https://cataas.com/api/cats', {
    method: 'GET',
  }).then((res) => res.json())
);

The solution here :
https://stackblitz.com/edit/nextjs-uigxj2?file=lib%2Fapi.ts

[LouisHaftmann]

Using cache probably works because it throws a 'Not implemented'-Error. Even if it works all the time, forgetting cache shouldn't lead to infinite request spamming. I still believe this is unintended behavior and needs a fix or should be documented somewhere.

[Fredkiss3]

Since the RFC for the cache isn't out yet, i suppose we should not use use in client components because without the cache API the use RFC is incomplete. The infinite requests is how use is intended works.

Jack Herrington made a video about it and gave different methods to fix the issue : https://youtu.be/ytXM05PVcFU?t=327

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.