React cache incompatible with Next.js cache components

[mattfc-ct]

Link to the code that reproduces this issue

https://github.com/mattfc-ct/react-cache-test

To Reproduce

Reproduction repo is created with npx create-next-app

1. Start the dev server with npm run dev or build/start with npm run build && npm run start
2. Load the homepage http://localhost:3000
3. Observe the console log

Current vs. Expected behavior

Current behavior:

Note the following output:

Running cacheTest function for key uncached
Running cacheTest function for key cached
Running cacheTest function for key cached

This indicates that the React cache function is not caching when using "use cache", but it is working when uncached.

Expected behavior

The output should be:

Running cacheTest function for key uncached
Running cacheTest function for key cached

Meaning, the React cache function should cache the same way whether "use cache" is present or not.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Aug 11 21:16:21 PDT 2025; root:xnu-11417.140.69.701.11~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 24.11.0
  npm: 11.6.1
  Yarn: 1.22.22
  pnpm: 10.25.0
Relevant Packages:
  next: 16.0.8 // Latest available version is detected (16.0.8).
  eslint-config-next: N/A
  react: 19.2.1
  react-dom: 19.2.1
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

cacheComponents

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

Tested on 16.0.0 and 16.0.8 and 16.1.0-canary.16 and same behavior is observed.

[icyJoseph]

Likely fixed by: #78703

Extracts from Reddit discussion:

This should be deduped but it isn't.

export default async function Home() {
  return (
      <Suspense>
        <CachedTestComponent name="test" />
        <CachedTestComponent name="test" />
      </Suspense>
  );
}
async function CachedTestComponent({ name }: { name: string }) {
  "use cache";
  cacheLife({ revalidate: 5 });
  const cacheTestValue = testFn(name);
  return <div>TestComponent: {cacheTestValue}</div>;
}

const testFn = cache(function testFn(label: string) {
  console.log(label);
  return label;
});

However in:

const store = React.cache(() => ({ current: null }))

function Parent() {
  const shared = store();
  shared.current = "Sneaking a value into a cache"
  return <Child />
}

async function Child() {
  'use cache'
  const shared = store();
  const valueFromParent = shared.current;
}

It is expected that from within the use cache scope, the React.cache can't see the data set outside. It is a new context if you will.

[chamberlain2007]

@icyJoseph Thanks for the referred PR. Is there any chance of getting #78703 merged?