Error recovery with reset in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the error boundary's reset function is called?

Consider a Next.js error boundary component that uses a reset function to clear the error state. What is the expected behavior after calling reset?

NextJS

import { useState } from 'react';

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);

  function reset() {
    setHasError(false);
  }

  if (hasError) {
    return <button onClick={reset}>Try again</button>;
  }

  return children;
}

A The component unmounts itself and does not show anything.

B The component throws the error again immediately after reset.

C The component remains in error state and does not re-render children.

D The component clears the error and re-renders its children normally.

💡 Hint

Think about what resetting error state means for rendering.

Calling reset clears the error state, so the component re-renders its children normally without error.

📝 Syntax

intermediate

Identify the syntax error in this Next.js error boundary reset handler

Which option correctly fixes the syntax error in this reset handler?

NextJS

function reset() {
  setHasError = false;
}

A Change to <code>setHasError(false);</code>

B Change to <code>setHasError == false;</code>

C Change to <code>setHasError(false) => {}</code>

D Change to <code>setHasError: false;</code>

💡 Hint

Remember how to call a state setter function in React.

State setters are functions and must be called with parentheses and the new value.

🔧 Debug

advanced

Why does the error boundary not reset after clicking the reset button?

Given this error boundary code, why does clicking the reset button not clear the error?

NextJS

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);

  function reset() {
    hasError = false;
  }

  if (hasError) {
    return <button onClick={reset}>Try again</button>;
  }

  return children;
}

A Because the reset function is not bound to the button's onClick event.

B Because directly assigning to hasError does not update React state.

C Because the component does not render the button when hasError is true.

D Because useState cannot be used inside error boundaries.

💡 Hint

Think about how React state updates work.

Directly assigning to the state variable does not trigger a re-render. The setter function must be used.

❓ state_output

advanced

What is the value of hasError after reset is called twice?

In this error boundary, what is the value of hasError after calling reset() two times in a row?

NextJS

const [hasError, setHasError] = useState(true);

function reset() {
  setHasError(false);
}

reset();
reset();

A undefined

B true

C false

D null

💡 Hint

Consider how React batches state updates.

Calling setHasError(false) twice keeps the state false after both calls.

🧠 Conceptual

expert

Why is resetting error state important in Next.js error boundaries?

Which reason best explains why implementing a reset function in Next.js error boundaries improves user experience?

A It allows users to recover from errors without reloading the entire page.

B It prevents errors from ever occurring in the application.

C It automatically fixes bugs in the code during runtime.

D It disables error logging to reduce console noise.

💡 Hint

Think about what users want when an error happens.

Resetting error state lets users try again without a full page reload, improving experience.