Đừng bao giờ quên sử dụng AbortController trong React

Tại sao chúng ta cần sử dụng AbortController?

Trong các ứng dụng React, khi một component unmount hoặc một yêu cầu call API không còn cần thiết nữa (ví dụ: người dùng chuyển trang hoặc thao tác bị hủy), chúng ta muốn ngắn chặn các yêu cầu không cần thiết này để tránh việc lãng phí tài nguyên và tăng hiệu suất ứng dụng. Đây là nơi AbortController trở nên hữu ích.

Sử dụng AbortController trong React.

Trong ví dụ dưới đây, chúng ta có một API yêu cầu một danh sách các đối tượng kiểm tra từ server. Chúng ta sử dụng AbortController để ngắn chặn yêu cầu nếu component đã bị unmount:

import React, { useEffect, useRef } from 'react';
import axios, { AxiosResponse } from 'axios';

const URI = 'YOUR_API_ENDPOINT';

function TestComponent() {
  const abortControllerRef = useRef<AbortController>(new AbortController());

  function loadTest() {
    const controller = abortControllerRef.current;
    axios.get(`${URI}/test`, { signal: controller.signal })
      .then((response: AxiosResponse<Test[]>) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  useEffect(() => {
    loadTest();
    // Clean up function, called when the component is unmounted
    return () => {
      abortControllerRef.current.abort();
    };
  }, []);  // Empty dependency array ensures the effect runs only once

  return (
    <div>
      {/* Your component JSX */}
    </div>
  );
}

export default TestComponent;

Trong đoạn code trên, chúng ta tạo một AbortController thông qua useRef, đảm bảo rằng chúng ta chỉ sử dụng một AbortController trong suốt vòng đời của component. Khi component được render, chúng ta gọi hàm loadTest(), trong đó chúng ta sử dụng axios.get với controller.signal để truyền AbortSignal vào function call API. Khi component bị hủy bỏ (unmount), hàm clean up sẽ được gọi và sử dụng abort() để hủy bỏ yêu cầu get resource khi không cần nữa.

Kết luận

AbortController là một công cụ quan trọng để quản lý các việc call API trong ứng dụng React của bạn. Bằng cách sử dụng nó, bạn có thể ngắn chặn các yêu cầu không mong muốn, tối ưu hóa tài nguyên và cải thiện hiệu suất ứng dụng của mình. Đảm bảo rằng bạn tích hợp việc sử dụng AbortController vào các yêu cầu mạng của bạn để tối ưu hóa trải nghiệm người dùng và tăng cường độ ổn định của ứng dụng.