Loading states for data in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook used for managing state.

NextJS

import React, { [1] } from 'react';

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

AuseState

BuseEffect

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState for state management.

Forgetting to import the hook from React.

The useState hook is used to manage state in functional components, which is essential for handling loading states.

2fill in blank

medium

Complete the code to fetch data inside a React effect hook.

NextJS

useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data))
    .finally(() => set[1](false));
}, []);

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

ALoad

BisLoading

Cloading

DLoading

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase variable names which are not valid for state variables.

Confusing the loading variable name with other similar names.

The state variable for loading is usually named loading in camelCase. The setter function is setLoading, so here we call setLoading(false) to indicate loading is done.

3fill in blank

hard

Fix the error in the conditional rendering to show loading text.

NextJS

if ([1]) {
  return <p>Loading...</p>;
}

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

AsetLoading

Bdata

Cloading

DisLoading

Attempts:

3 left

💡 Hint

Common Mistakes

Using the setter function setLoading instead of the state variable.

Checking the data variable instead of loading state.

The variable loading holds the boolean state for loading. We check it to decide whether to show the loading message. setLoading is a function and cannot be used here.

4fill in blank

hard

Fill both blanks to initialize loading state and data state using React hooks.

NextJS

const [[1], setLoading] = useState(true);
const [[2], setData] = useState(null);

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

Aloading

Bdata

CisLoading

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent variable names that don't match setter functions.

Initializing loading state as false instead of true.

We initialize loading state as true because data is loading initially. The data state is named data and starts as null.

5fill in blank

hard

Fill all three blanks to render data or loading message conditionally.

NextJS

return (
  <main>
    { [1] ? (
      <p>Loading...</p>
    ) : (
      <ul>
        { [2]?.map(item => (
          <li key={item.id}>[3]</li>
        ))}
      </ul>
    )}
  </main>
);

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

Aloading

Bdata

Citem.name

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable names for loading or data.

Trying to map over a variable that is not an array.

Not accessing the correct property of the item.

We check loading to show the loading message. When not loading, we map over data to render each item.name inside list items.