Request memoization in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to memoize the fetch request using a simple cache object.

NextJS

const cache = {};

export async function fetchData(url) {
  if (cache[url]) {
    return cache[url];
  }
  const response = await fetch(url);
  const data = await response.json();
  cache[url] = [1];
  return data;
}

Drag options to blanks, or click blank then click option'

Adata

Bresponse

Curl

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Storing the response object instead of the parsed data.

Using the URL string as the cached value instead of the data.

The fetched data is stored in the cache object under the URL key to avoid repeated requests.

2fill in blank

medium

Complete the React hook to memoize the fetch request result using useState and useEffect.

NextJS

import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const json = await response.json();
      setData([1]);
    }
    fetchData();
  }, [url]);
  return data;
}

Drag options to blanks, or click blank then click option'

Aresponse

Bjson

Curl

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Setting state with the response object instead of JSON data.

Using the URL or existing state variable incorrectly.

The hook sets the state with the parsed JSON data after fetching.

3fill in blank

hard

Fix the error in this Next.js server component to memoize the fetch request result.

NextJS

import React from 'react';

const cache = new Map();

export default async function Page() {
  const url = 'https://api.example.com/data';
  if (cache.has(url)) {
    return <pre>{JSON.stringify(cache.get(url), null, 2)}</pre>;
  }
  const res = await fetch(url);
  const data = await res.json();
  cache.set(url, [1]);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Drag options to blanks, or click blank then click option'

Acache

Bres

Curl

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Caching the response object instead of the parsed data.

Caching the URL string or the cache object itself.

The parsed JSON data must be stored in the cache, not the response object or other values.

4fill in blank

hard

Fill both blanks to create a memoized fetch function that caches results and returns cached data if available.

NextJS

const cache = {};

export async function memoFetch(url) {
  if ([1]) {
    return cache[url];
  }
  const response = await fetch(url);
  const data = await response.json();
  [2] = data;
  return data;
}

Drag options to blanks, or click blank then click option'

Acache[url]

Bresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Checking the wrong variable for cache existence.

Assigning the wrong value to the cache.

The function checks if the URL is cached and returns cached data. Then it stores the fetched data in the cache.

5fill in blank

hard

Fill all three blanks to implement a React hook that memoizes fetch results and updates state only when data changes.

NextJS

import { useState, useEffect, useRef } from 'react';

export function useMemoFetch(url) {
  const [data, setData] = useState(null);
  const cache = useRef({});

  useEffect(() => {
    if (cache.current[url]) {
      setData(cache.current[[1]]);
      return;
    }
    async function fetchData() {
      const res = await fetch(url);
      const json = await res.json();
      cache.current[[2]] = json;
      setData(json);
    }
    fetchData();
  }, [[3]]);

  return data;
}

Drag options to blanks, or click blank then click option'

Aurl

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using the data state variable instead of URL for cache keys.

Missing the URL dependency in the effect hook.

All blanks relate to the URL string to correctly cache and trigger effect on URL changes.