Request memoization in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this memoized fetch in a Next.js Server Component?

Consider this Next.js Server Component that fetches user data with memoization. What will be rendered if the component is called twice with the same userId?

NextJS

import { cache } from 'react';

const fetchUser = cache(async (userId) => {
  console.log('Fetching user', userId);
  const res = await fetch(`https://api.example.com/users/${userId}`);
  return res.json();
});

export default async function User({ userId }) {
  const user = await fetchUser(userId);
  return <div>{user.name}</div>;
}

A The console logs 'Fetching user' once, but the user name is rendered only once.

B The console logs 'Fetching user' once, and the user name is rendered twice.

C The console logs nothing, and the user name is rendered twice.

D The console logs 'Fetching user' twice, and the user name is rendered twice.

💡 Hint

Think about how cache memoizes the function calls with the same arguments.

The cache function memoizes the fetchUser call. So when called twice with the same userId, the fetch happens only once (console logs once), but the component renders twice with the cached data.

📝 Syntax

intermediate

Which option correctly memoizes a fetch request in Next.js using React's cache?

Choose the code snippet that correctly memoizes a fetch request using cache from React in Next.js.

A

import { cache } from 'react';
const getData = cache(async (id) => {
  const res = await fetch(`/api/data/${id}`);
  return res.json();
});

B

import { memo } from 'react';
const getData = memo(async (id) => {
  const res = await fetch(`/api/data/${id}`);
  return res.json();
});

C

import { cache } from 'next/navigation';
const getData = cache(async (id) => {
  const res = await fetch(`/api/data/${id}`);
  return res.json();
});

D

import { cache } from 'react';
const getData = async (id) => {
  const res = await fetch(`/api/data/${id}`);
  return res.json();
};

💡 Hint

Remember the correct import source for cache in React 18+ and Next.js 14+.

The cache function is imported from 'react' and wraps the async function to memoize it. Option A uses memo which is for components, not functions. Option A imports from 'next' which is incorrect; the correct import for Next.js navigation utilities is 'next/navigation'. Option A does not memoize.

🔧 Debug

advanced

Why does this memoized fetch not cache results as expected?

Given this code, why does the fetch happen on every call despite using cache?

NextJS

import { cache } from 'react';

export default async function Page() {
  const fetchData = cache(async (url) => {
    const res = await fetch(url);
    return res.json();
  });
  const data1 = await fetchData('https://api.example.com/data');
  const data2 = await fetchData('https://api.example.com/data');
  return <div>{data1.value} - {data2.value}</div>;
}

A Because the URL string is not a stable reference, so cache treats each call as different.

B Because fetch is not memoized internally, so cache does not apply.

C Because the fetchData function is redefined on every render, losing memoization.

D Because the cache function only memoizes synchronous functions, not async ones.

💡 Hint

Consider where the fetchData function is declared and how cache memoizes.

If fetchData is declared inside the component or function body, it is recreated on every render, so memoization is lost. It must be declared outside to persist memoization.

❓ state_output

advanced

What is the value of count after these memoized fetch calls?

Analyze this code snippet. What will be the final value of count after both calls?

NextJS

import { cache } from 'react';

let count = 0;
const fetchData = cache(async (id) => {
  count++;
  return { id };
});

async function run() {
  await fetchData(1);
  await fetchData(1);
  await fetchData(2);
}

run();

A count is 2 because fetchData is called twice with unique arguments.

B count is 3 because fetchData is called three times.

C count is 1 because fetchData is memoized and called once.

D count is 0 because count++ is never executed.

💡 Hint

Think about how cache memoizes calls with different arguments.

The memoized function runs once for each unique argument. Calls with the same argument reuse cached results. So count increments twice: once for id=1, once for id=2.

🧠 Conceptual

expert

Which statement best describes request memoization with React's cache in Next.js?

Choose the most accurate description of how cache memoizes requests in Next.js Server Components.

A <p><code>cache</code> memoizes functions globally but does not consider function arguments, so it caches only one result per function.</p>

B <p><code>cache</code> memoizes only client-side requests and resets on every server render.</p>

C <p><code>cache</code> memoizes requests by storing results in localStorage for offline use.</p>

D <p><code>cache</code> memoizes function calls by argument identity and persists results across server renders, avoiding repeated fetches for the same inputs.</p>

💡 Hint

Recall how cache works in server components and argument-based memoization.

cache memoizes async functions by their arguments and keeps results across server renders, preventing duplicate fetches for the same inputs. It does not cache client-side or use localStorage.