Why advanced patterns solve complex UIs in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Next.js page component.

NextJS

export default function Home() {
  return <main>[1]Hello, world![1]</main>;
}

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

A<div>

B<strong>

C<header>

D<footer>

Attempts:

3 left

💡 Hint

Common Mistakes

Using semantic tags like

when a generic container is needed.

Leaving out the container tag causing JSX errors.

The

tag is a common container element used to wrap content in React and Next.js components.

2fill in blank

medium

Complete the code to import the useState hook from React.

NextJS

import [1] from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

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

AuseEffect

BuseState

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useEffect instead of useState.

Forgetting to import the hook causing runtime errors.

useState is the React hook used to add state to functional components.

3fill in blank

hard

Fix the error in the Next.js server component export syntax.

NextJS

export default function [1]() {
  return <h1>Server Component</h1>;
}

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

AClientComponent

BServerComponent

Cpage

DPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for components causing errors.

Naming the component inconsistently with Next.js conventions.

In Next.js App Router, the default export for a page component should be named 'Page' to follow conventions.

4fill in blank

hard

Fill both blanks to create a React context and provide it to children.

NextJS

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

const ThemeContext = createContext('light');

export default function ThemeProvider({ children }) {
  const [theme, setTheme] = [2]('light');
  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
}

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.

Not importing useState causing runtime errors.

useState is imported and used to hold the theme state, which is provided via context.

5fill in blank

hard

Fill all three blanks to create a memoized callback that updates state.

NextJS

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

export default function Counter() {
  const [count, setCount] = useState(0);
  const increment = [2](() => {
    setCount(count + 1);
  }, [[3]]);
  return <button onClick={increment}>{count}</button>;
}

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

AuseCallback

BsetCount

Ccount

DuseMemo

Attempts:

3 left

💡 Hint

Common Mistakes

Using useMemo instead of useCallback for functions.

Leaving the dependency array empty causing stale closures.

useCallback memoizes the increment function, and count is the dependency to update it when count changes.