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

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js Server Component?

Consider this Next.js Server Component that fetches data and renders a list. What will be the rendered output?

NextJS

import React from 'react';

async function getData() {
  return ['apple', 'banana', 'cherry'];
}

export default async function FruitList() {
  const fruits = await getData();
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit.toUpperCase()}</li>
      ))}
    </ul>
  );
}

A <ul><li>APPLE</li><li>BANANA</li></ul>

B <ul><li>APPLE</li><li>BANANA</li><li>CHERRY</li></ul>

C SyntaxError: Unexpected token 'await' in function

D <ul><li>apple</li><li>banana</li><li>cherry</li></ul>

💡 Hint

Remember that Server Components can use async/await directly and the map transforms each fruit to uppercase.

The component fetches the array ['apple', 'banana', 'cherry'] asynchronously, then maps each fruit to uppercase inside list items. The output is an unordered list with uppercase fruit names.

❓ state_output

intermediate

What is the displayed count after these React state updates?

In this React functional component using hooks, what number will be displayed after clicking the button twice quickly?

NextJS

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={increment}>Add 2</button>
    </>
  );
}

A Count: 0

B Count: 2

C Count: 1

D Count: 4

💡 Hint

Remember that React state updates are asynchronous and batched, so multiple setCount calls with the same value do not accumulate.

Both setCount calls use the same stale count value (0), so the count updates to 1 only. Clicking twice quickly runs increment twice, but each call sets count to 1, so final count is 1.

📝 Syntax

advanced

Which option correctly uses Next.js 14 App Router server action syntax?

Next.js 14 introduces server actions for form handling. Which code snippet correctly defines a server action to handle a form submission?

A

export async function action() {
  'use server';
  const name = formData.get('name');
  return `Hello, ${name}`;
}

B

export async function action(formData) {
  const name = formData.get('name');
  return `Hello, ${name}`;
}

C

export function action(formData) {
  'use server';
  const name = formData.get('name');
  return `Hello, ${name}`;
}

D

export async function action(formData) {
  'use server';
  const name = formData.get('name');
  return `Hello, ${name}`;
}

💡 Hint

Server actions must be async functions and include the 'use server' directive inside the function body.

Option D correctly defines an async function with 'use server' directive and accepts formData parameter. Option D misses 'use server'. Option D is not async. Option D misses formData parameter.

🔧 Debug

advanced

Why does this React component cause an infinite render loop?

Examine this React component. Why does it cause an infinite render loop?

NextJS

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

export default function Loop() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1);
  }, [count]);

  return <p>Count: {count}</p>;
}

A Because useEffect updates state on every count change, triggering itself repeatedly.

B Because setCount is called outside useEffect causing immediate re-renders.

C Because count is not initialized properly causing undefined behavior.

D Because useEffect has an empty dependency array causing no updates.

💡 Hint

Think about what happens when state changes inside a useEffect that depends on that state.

The useEffect runs after every count change and calls setCount to increment count, which triggers useEffect again, causing an infinite loop.

🧠 Conceptual

expert

Why do advanced patterns like React Server Components improve complex UI performance?

Select the best explanation for why React Server Components help solve performance issues in complex user interfaces.

A They allow rendering parts of the UI on the server, reducing client JavaScript and improving load times.

B They force all UI logic to run on the client, increasing interactivity but slowing initial load.

C They replace React hooks with class components for better lifecycle control.

D They require all data fetching to happen on the client, increasing network requests.

💡 Hint

Think about where rendering happens and how that affects client load and interactivity.

React Server Components render UI on the server, sending minimal HTML to the client. This reduces JavaScript bundle size and speeds up initial load, improving performance for complex UIs.