Senior LevelReact JS & React 19
How does React deduplicate identical fetch requests inside Server Component subtrees?
❓ Interview Prompt: Explain React `fetch` polyfill, Request Memoization, deduplicating fetch calls across RSC subtrees, and `cache()` function.
In React Server Components, multiple nested server components often need the exact same user or configuration data:
Native Request Memoization:
React monkey-patches the native 'fetch()' API on the server to automatically deduplicate identical HTTP 'GET' requests during a single render pass!
•
If 10 Server Components call 'fetch('/api/user')', React executes ONLY ONE network request and shares the result across all 10 components!
Code Implementation Example
jsx
// Called in Header, Sidebar, and Profile Server Components simultaneously:
async function getUser() {
// React automatically deduplicates this fetch! Executed ONLY ONCE per request!
const res = await fetch('https://api.example.com/me');
return res.json();
}💡Automatic fetch request deduplication in React Server Components.
🎯 Interview Key Takeaway
React Server Components automatically deduplicate identical GET fetch requests made across the component tree in a single render pass.
#RSC#Request Memoization#fetch#Deduplication#Senior
Back to all React JS & React 19 Questions→