Loading states for data in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Identify the loading state output in a Next.js component

Consider this Next.js component that fetches user data asynchronously. What will the component render while the data is loading?

NextJS

import { useState, useEffect } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setUser({ name: 'Alice' });
      setLoading(false);
    }, 2000);
  }, []);

  if (loading) return <p>Loading user data...</p>;

  return <p>User: {user.name}</p>;
}

A <p>Loading user data...</p>

B <p>User: Alice</p>

C <p>No user data available</p>

D <p>Error loading user data</p>

💡 Hint

Think about what the component returns when the loading state is true.

While the data is loading, the component returns the loading message. Only after loading is false does it show the user name.

❓ state_output

intermediate

What is the final rendered output after data fetch?

Given this Next.js component, what will be the rendered output after 3 seconds?

NextJS

import { useState, useEffect } from 'react';

export default function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setData('Hello World');
      setLoading(false);
    }, 3000);
  }, []);

  if (loading) return <p>Loading...</p>;

  return <p>Data: {data}</p>;
}

A <p>Data: </p>

B <p>Loading...</p>

C <p>Data: Hello World</p>

D <p>Error fetching data</p>

💡 Hint

After the timeout, loading becomes false and data is set.

After 3 seconds, loading is false and data is 'Hello World', so the component renders the data.

🔧 Debug

advanced

Why does the loading state never end in this Next.js component?

Examine this component. Why does it keep showing the loading message forever?

NextJS

import { useState, useEffect } from 'react';

export default function BrokenLoader() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        // Missing setLoading(false) here
      });
  }, []);

  if (loading) return <p>Loading...</p>;

  return <p>Data loaded</p>;
}

A The useEffect hook is missing a dependency array.

B The initial state of loading should be false.

C The fetch URL is incorrect causing an error.

D The setLoading(false) call is missing inside the fetch then block.

💡 Hint

Check what happens after data is fetched.

The loading state never changes because setLoading(false) is never called after data fetch completes.

📝 Syntax

advanced

Which option causes a syntax error in a Next.js loading state component?

Identify the option that will cause a syntax error when used in a Next.js component managing loading state.

A const [loading, setLoading] = useState(true); if (loading) return <p>Loading...</p>;

B const [loading, setLoading] = useState(true); if (loading) return (<p>Loading...</p>);

C const [loading, setLoading] = useState(true); if (loading) { return <p>Loading...</p>; }

D ;>p/<...gnidaoL>p< nruter )gnidaol( fi ;)eurt(etatSesu = ]gnidaoLtes ,gnidaol[ tsnoc

💡 Hint

Look for missing punctuation between statements.

Option A is missing a semicolon or line break between useState and if statement, causing a syntax error.

🧠 Conceptual

expert

What is the best way to handle loading states for server-side data fetching in Next.js 14 App Router?

In Next.js 14 using the App Router, which approach correctly handles loading states for server-side data fetching in a client component?

A Use a client component with useState and useEffect to fetch data and manage loading state manually.

B Use React's Suspense with a server component that fetches data and a fallback loading UI in the client component.

C Use a server component to fetch data and pass it as props to a client component that shows a loading spinner.

D Fetch data inside the client component synchronously and render loading UI conditionally.

💡 Hint

Next.js 14 encourages server components and React Suspense for loading states.

React Suspense with server components allows declarative loading UI with fallback while data loads server-side.