How to use AbortController in React

In this post, I will show you how to use AbortController in React.

AbortController is a built-in JavaScript interface used to control and cancel asynchronous operations, especially those that return Promise objects, such as fetch() requests.

It provides a way to abort a request, preventing the operation from completing if, for example, the component is unmounted in a React application or if the user navigates away before the fetch completes.

General Pattern of Using AbortController in React

// Create an instance of AbortController
const controller = new AbortController();

// Use the signal in your async operation
const signal = controller.signal;

// Cleanup
controller.abort();

Where to Use AbortController

In general, you can use AbortController in the following cases:

Example Using AbortController with fetch in React

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

function FetchDataComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Create an instance of AbortController
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        const response = await fetch('https://example.com/posts', 
            { signal }
        );
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Fetch request aborted');
        } else {
          setError(err.message);
          setLoading(false);
        }
      }
    };

    fetchData();

    // Cleanup function to abort the fetch if the component unmounts
    return () => {
      controller.abort();
    };
  }, []); 

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchDataComponent;

In the above code snippet, we are using the AbortController interface to create a new controller object and then pass its signal property to the fetch method to abort the request when needed. We also update the loading state based on the request status and display the fetched data if available.

Example Using AbortController with Event Listeners

This is an example of usage win React:

import { useEffect } from 'react';

function ClickLogger() {
  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;

    const handleClick = () => {
      console.log('Document clicked!');
    };

    document.addEventListener('click', handleClick, { signal });

    return () => {
      // Cleanup function - aborts the controller when component unmounts
      controller.abort();
    };
  }, []);

  return <div>Click anywhere and check console</div>;
}

In the above code snippet, we are using the AbortController interface to create a new controller object and then pass its signal property to the addEventListener method to abort the event listener when needed.

Example Using AbortController with WebSocket

import { useState, useEffect } from 'react';

function WebSocketComponent() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;

    const ws = new WebSocket('wss://example.com/socket');
    
    ws.onopen = () => {
      console.log('WebSocket connected');
    };

    ws.onmessage = (event) => {
      if (!signal.aborted) {
        setMessages(prev => [...prev, event.data]);
      }
    };

    ws.onclose = () => {
      if (!signal.aborted) {
        console.log('WebSocket disconnected');
      }
    };

    signal.addEventListener('abort', () => {
      ws.close();
    });

    return () => {
      controller.abort();
    };
  }, []);

  const sendMessage = () => {
    // In a real app, you would access the WebSocket instance
    // This is simplified for the example
    console.log('Message sent:', input);
    setInput('');
  };

  return (
    <div>
      <h2>WebSocket Messages</h2>
      <div>
        {messages.map((msg, i) => (
          <p key={i}>{msg}</p>
        ))}
      </div>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

Summary

Related Posts