AbortController for cancellation in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when AbortController aborts a fetch?

Consider this React Native code snippet using AbortController to cancel a fetch request. What will be the output or behavior when the abort() method is called before the fetch completes?

React Native

const controller = new AbortController();
fetch('https://example.com/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log('Data received'))
  .catch(error => console.log(error.name));

controller.abort();

A Logs 'AbortError' to the console

B Logs 'TypeError' to the console

C Logs 'Data received' to the console

D Fetch completes normally without any error

💡 Hint

Think about what happens when a fetch is cancelled using AbortController.

When abort() is called on the AbortController, the fetch is cancelled and it throws an error with the name 'AbortError'. This error is caught in the catch block and logged.

🧠 Conceptual

intermediate

Why use AbortController in React Native fetch?

Which of the following best explains why AbortController is useful when making fetch requests in React Native?

A It encrypts the fetch request data for security

B It caches fetch responses for offline use

C It automatically retries failed fetch requests

D It allows cancelling ongoing fetch requests to save resources and avoid unwanted updates

💡 Hint

Think about what happens if a user navigates away before a fetch finishes.

AbortController lets you cancel fetch requests that are no longer needed, preventing wasted network and CPU usage and avoiding state updates on unmounted components.

📝 Syntax

advanced

Identify the correct way to use AbortController with fetch

Which code snippet correctly uses AbortController to cancel a fetch request in React Native?

A

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort();

B

const controller = new AbortController();
fetch(url, { abortSignal: controller.signal });
controller.abort();

C

const controller = new AbortController();
fetch(url, { signal: controller });
controller.abort();

D

const controller = new AbortController();
fetch(url, { signal: controller.abort });
controller.abort();

💡 Hint

Check the property name used to pass the signal to fetch.

The fetch API expects the signal property to be set to controller.signal. Other options use incorrect property names or values.

❓ lifecycle

advanced

When should you call abort() in a React Native component?

In a React Native functional component that fetches data on mount, when is the best time to call controller.abort() to avoid memory leaks?

A After the fetch request completes successfully

B Inside the cleanup function returned by useEffect

C Immediately after starting the fetch request

D Only when the user presses a cancel button

💡 Hint

Think about component unmounting and cleaning up side effects.

Calling abort() inside the cleanup function of useEffect cancels the fetch if the component unmounts before the fetch completes, preventing memory leaks and state updates on unmounted components.

🔧 Debug

expert

Why does this fetch never abort?

Given this React Native code, why does calling controller.abort() not stop the fetch request?

React Native

const controller = new AbortController();

function fetchData() {
  fetch('https://example.com/api', {})
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.log(err.name));
}

fetchData();
controller.abort();

A The abort() method must be called before fetchData()

B AbortController is not supported in React Native

C The fetch call does not use the controller.signal, so abort() has no effect

D The fetch URL is incorrect, so abort() is ignored

💡 Hint

Check how the signal is passed to fetch.

The fetch call must receive the signal option from the AbortController to be cancellable. Without passing controller.signal, abort() does nothing.