v2.1.0 (April 13th, 2026)

What's Changed

✨ New Features

• useAbortWhenUnmount hook - hook that automatically aborts an Aborter instance when the component unmounts #8
• loading field - a status indicating that the request is still being processed #8

🐜 Bug Fixes

• Fixed the assembly defect, the saborter package becomes external #8
• Fixed a bug with initiator typing in the onAbort handler #8

🎯 Usage Example

Using internal loading state

import { useState } from 'react';
import { AbortError } from 'saborter/errors';
import { useAborter } from '@saborter/react';

const Component = () => {
  // Create an Aborter instance via the hook
  const { aborter, loading } = useAborter();

  const [user, setUser] = useState(null);

  // Use for the request
  const fetchData = async () => {
    try {
      const user = await aborter.try((signal) => fetch('/api/user', { signal }));
      setUser(user);
    } catch (error) {
      if (error instanceof AbortError) {
        // An abort error will occur either when the `aborter.abort()` method is called
        // or when the component is unmounted.
        console.error('Abort error:', error);
      }
      console.error('Request error:', error);
    }
  };

  return <h1>{loading ? 'Loading...' : user.fullname}</h1>;
};

Request interruption when unmounting a component with an external aborter

If you have an aborter instance that was created behind a component, for example, in a parent component, but you want to abort the request when the child is unmounted, you can use the useAbortWhenUnmount hook.

import { useAborter, useAbortWhenUnmount } from '@saborter/react';

const Child = ({ aborter }) => {
  useAbortWhenUnmount(aborter);

  return <div>Child component</div>;
}

const Parent = () => {
  const { aborter } = useAborter();

  // Use for the request
  const fetchData = async () => {
    try {
      const user = await aborter.try((signal) => fetch('/api/user', { signal }));
      setUser(user);
    } catch (error) {
      if (error instanceof AbortError) {
        console.error('Abort error initiator:', error.initiator); // 'component-unmounted';
      if (error instanceof AbortError && error.initiator === 'component-unmounted') {
        // handling request interruption due to component unmounting
      }
    }
  };

  return (
    <div>
      Parent Component
      <Child aborter={aborter}>
    </div>
  );
};

📦 Distribution

• Available via npm: npm install saborter @saborter/react
• Available via yarn: yarn add saborter @saborter/react

v2.0.0 (March 4th, 2026)

What's Changed

💥 Breaking Changes

• Increases the saborter version to 2 majors

✨ New Features

• useReusableAborter hook - hook wrapper over the ReusableAborter class

🎯 Usage Example

const aborter = new useReusableAborter();

// Get the current signal
const signal = aborter.signal;

// Attach listeners
signal.addEventListener('abort', () => console.log('Listener 1'));
signal.addEventListener('abort', () => console.log('Listener 2'), { once: true }); // won't be recovered

// Set onabort handler
signal.onabort = () => console.log('Onabort handler');

// First abort
aborter.abort('First reason');
// Output:
// Listener 1
// Listener 2 (once)
// Onabort handler

// The signal is now a fresh one, but the non‑once listeners and onabort are reattached
signal.addEventListener('abort', () => console.log('Listener 3')); // new listener, will survive next abort

// Second abort
aborter.abort('Second reason');
// Output:
// Listener 1
// Onabort handler
// Listener 3

📦 Distribution

• Available via npm: npm install @saborter/react
• Available via yarn: yarn add @saborter/react

Full Changelog: v1.0.0...v2.0.0

v1.0.0 (February 4th, 2026)

What's Changed | 🎉 Initial Release of @saborter/react

✨ New Features

Core Functionality

• useAborter hook - Saborter instance wrapped React API

📖 Possibilities

• The aborter field always has the same reference to the Aborter instance.
• Automatically abort the request when the component is unmounted.
• Automatically unsubscribe from all listeners when the component is unmounted.

🎯 Usage Example

import { useAborter } from '@saborter/react';

const Component = () => {
  // Create an Aborter instance via the hook
  const { aborter } = useAborter();

  // Use for the request
  const fetchData = async () => {
    try {
      const data = await aborter.try((signal) => fetch('/api/data', { signal }));
      console.log('Data received:', data);
    } catch (error) {
      console.error('Request error:', error);
    }
  };
};

📦 Distribution

• Available via npm: npm install @saborter/react
• Available via yarn: yarn add @saborter/react