A lightweight React hook and utility to retry failed async actions automatically — ideal for handling failed requests, flaky connections, and offline scenarios.
⚡ Automatically persists and retries when the browser goes back online.
- ✅ Retry failed async functions
- ⏱ Configurable retry delay and max attempts
- 🔁 Auto-retries in the background
- 🧠 Persists across page reloads using
localStorage - 🧹 Hook-based API for React
npm install react-retry-queue uuid💡
reactmust be installed in your project. Compatible with React 17, 18, and 19.
import React from "react";
import { useRetryQueue } from "react-retry-queue";
const SaveButton = () => {
const { enqueue } = useRetryQueue();
const handleSave = () => {
enqueue(
async () => {
const response = await fetch("/api/save", {
method: "POST",
body: JSON.stringify({ data: "example" }),
headers: { "Content-Type": "application/json" },
});
if (!response.ok) {
throw new Error("Request failed");
}
},
{
maxAttempts: 5,
delay: 3000, // Retry every 3 seconds
}
);
};
return <button onClick={handleSave}>Save</button>;
};Retries an asynchronous function on failure.
| Name | Type | Default | Description |
|---|---|---|---|
fn |
() => Promise<void> |
— | The async function to retry |
maxAttempts |
number |
3 |
Maximum retry attempts |
delay |
number |
5000 |
Milliseconds to wait between retries |
The library uses Jest and @testing-library/react for tests.
npm install
npm testreact-retry-queue/
├── src/
│ ├── index.ts
│ ├── queueManager.ts
│ └── useRetryQueue.ts
├── tests/
│ └── useRetryQueue.test.ts
├── dist/
├── package.json
├── tsconfig.json
└── README.md
- Retry failed network requests
- Queue up actions while offline
- Retry background sync jobs
- Ensure delivery of POST/PATCH requests
This library is compatible with:
- ✅ React 17
- ✅ React 18
- ✅ React 19
Declared as a peerDependency to avoid conflicts.
MIT © Eze Williams Ezebuilo