Description
Summary
The cache
function generates a new
promise reference on every call, causing the use hook to treat it as a new dependency. This results in an infinite
fetch loop as getData() is continuously invoked on each render.
Page
https://react.dev/reference/react/cache
Details
The following code demonstrates an issue with the cache
function, which leads to an infinite fetch
loop when used with use
'use client';
import { use, cache } from "react";
export const getData = cache(() => fetch("https://jsonplaceholder.typicode.com/posts").then(res => res.json()));
export function Home() {
const data = use(getData());
return (
<pre>{JSON.stringify(data)}</pre>
);
};
Problem
The cache function is expected to memoize the result of a function call. However, it appears to return a new promise reference every time getData() is called, which causes the use hook to treat it as a new input on every render. This results in an infinite fetch loop.
Expected Behavior
The cache function should return the same promise reference for the same input, ensuring that use(getData()) only triggers a single fetch request.
Actual Behavior
Maybe the cache function creates a new promise reference on each call, leading to an infinite loop of fetch requests.
Environment
React version: >=19 ("^19.0.0")