Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { useRef } from 'react';

export default function useDebouncedCallback<
T extends (...args: any[]) => void,
>(callback: T, delay: number) {
export default function useDebounceCallback<T extends (...args: any[]) => void>(
callback: T,
delay: number
) {
const timeout = useRef<ReturnType<typeof setTimeout>>();
const lastArgs = useRef<Parameters<T>>();

Expand Down Expand Up @@ -35,7 +36,7 @@ export default function useDebouncedCallback<
}

return {
debounced: debouncedFunction,
debounce: debouncedFunction,
cancel,
flush,
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { expect, it, describe, vi, beforeEach } from 'vitest';
import { renderHook } from '@testing-library/react';
import useDebouncedCallback from '.';
import useDebounceCallback from '.';

const getSomeData = vi.fn(
(id: number, quantity: number, options: { obj?: boolean }) => {
Expand All @@ -13,23 +13,23 @@ const getSomeData = vi.fn(
);
const debounceTime = 10;

describe('useDebouncedCallback', () => {
describe('useDebounceCallback', () => {
beforeEach(() => {
vi.clearAllMocks();
});

it('Should debounce callbacks and execute the last one for each key', async () => {
const { result } = renderHook(() =>
useDebouncedCallback(getSomeData, debounceTime)
useDebounceCallback(getSomeData, debounceTime)
);

// Call the debounced callback without key, it will debounce by default
result.current.debounced(1, 1, { obj: false });
result.current.debounced(1, 4, { obj: true });
result.current.debounced(1, 4, { obj: false });
result.current.debounced(1, 2, { obj: false });
result.current.debounced(1, 5, { obj: false });
result.current.debounced(1, 8, { obj: true });
result.current.debounce(1, 1, { obj: false });
result.current.debounce(1, 4, { obj: true });
result.current.debounce(1, 4, { obj: false });
result.current.debounce(1, 2, { obj: false });
result.current.debounce(1, 5, { obj: false });
result.current.debounce(1, 8, { obj: true });

// Wait for the debounce time to elapse
await new Promise((resolve) => setTimeout(resolve, debounceTime + 10));
Expand All @@ -40,16 +40,16 @@ describe('useDebouncedCallback', () => {

it('Should not debounce if flush', async () => {
const { result } = renderHook(() =>
useDebouncedCallback(getSomeData, 10000000)
useDebounceCallback(getSomeData, 10000000)
);

// Call the debounced callback without key, it will debounce by default
result.current.debounced(1, 1, { obj: false });
result.current.debounced(1, 4, { obj: true });
result.current.debounced(1, 4, { obj: false });
result.current.debounced(1, 2, { obj: false });
result.current.debounced(1, 5, { obj: false });
result.current.debounced(1, 8, { obj: true });
result.current.debounce(1, 1, { obj: false });
result.current.debounce(1, 4, { obj: true });
result.current.debounce(1, 4, { obj: false });
result.current.debounce(1, 2, { obj: false });
result.current.debounce(1, 5, { obj: false });
result.current.debounce(1, 8, { obj: true });

result.current.flush();

Expand All @@ -59,16 +59,16 @@ describe('useDebouncedCallback', () => {

it('Should cancel debounce callback', async () => {
const { result } = renderHook(() =>
useDebouncedCallback(getSomeData, debounceTime)
useDebounceCallback(getSomeData, debounceTime)
);

// Call the debounced callback without key, it will debounce by default
result.current.debounced(1, 1, { obj: false });
result.current.debounced(1, 4, { obj: true });
result.current.debounced(1, 4, { obj: false });
result.current.debounced(1, 2, { obj: false });
result.current.debounced(1, 5, { obj: false });
result.current.debounced(1, 8, { obj: true });
result.current.debounce(1, 1, { obj: false });
result.current.debounce(1, 4, { obj: true });
result.current.debounce(1, 4, { obj: false });
result.current.debounce(1, 2, { obj: false });
result.current.debounce(1, 5, { obj: false });
result.current.debounce(1, 8, { obj: true });

result.current.cancel();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const DEBOUNCE_ERR_KEY = 'Key is required for debouncing';
* @throws {TypeError} If the provided key is not a valid primitive type (e.g.,
* string, number, or symbol).
*/
export default function useKeyedDebouncedCallback<
export default function useKeyedDebounceCallback<
T extends (...args: any[]) => void,
>(callback: T, delay: number) {
const timeouts = useRef(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { expect, it, describe, vi, beforeEach } from 'vitest';
import { renderHook } from '@testing-library/react';
import useKeyedDebouncedCallback from '.';
import useKeyedDebounceCallback from '.';

const getSomeData = vi.fn(
(id: number, quantity: number, options: { obj?: boolean }) => {
Expand All @@ -13,14 +13,14 @@ const getSomeData = vi.fn(
);
const debounceTime = 10;

describe('useKeyedDebouncedCallback', () => {
describe('useKeyedDebounceCallback', () => {
beforeEach(() => {
vi.clearAllMocks();
});

it('Should call many callbacks and execute the last one', async () => {
const { result } = renderHook(() =>
useKeyedDebouncedCallback(getSomeData, debounceTime)
useKeyedDebounceCallback(getSomeData, debounceTime)
);

// Call the debounced callback without key, it will debounce by default
Expand All @@ -40,7 +40,7 @@ describe('useKeyedDebouncedCallback', () => {

it('Should cancel the debounced callbacks', async () => {
const { result } = renderHook(() =>
useKeyedDebouncedCallback(getSomeData, debounceTime)
useKeyedDebounceCallback(getSomeData, debounceTime)
);

// Call the debounced callback without key, it will debounce by default
Expand All @@ -60,7 +60,7 @@ describe('useKeyedDebouncedCallback', () => {

it('Should flush the debounced callbacks', async () => {
const { result } = renderHook(() =>
useKeyedDebouncedCallback(getSomeData, 100000000)
useKeyedDebounceCallback(getSomeData, 100000000)
);

// Call the debounced callback without key, it will debounce by default
Expand All @@ -82,7 +82,7 @@ describe('useKeyedDebouncedCallback', () => {

it('Should flush all the debounced callbacks', async () => {
const { result } = renderHook(() =>
useKeyedDebouncedCallback(getSomeData, 100000000)
useKeyedDebounceCallback(getSomeData, 100000000)
);

// Call the debounced callback without key, it will debounce by default
Expand All @@ -104,7 +104,7 @@ describe('useKeyedDebouncedCallback', () => {

it('Should cancel the debounced callbacks', async () => {
const { result } = renderHook(() =>
useKeyedDebouncedCallback(getSomeData, debounceTime)
useKeyedDebounceCallback(getSomeData, debounceTime)
);

// Call the debounced callback without key, it will debounce by default
Expand All @@ -124,7 +124,7 @@ describe('useKeyedDebouncedCallback', () => {

it('Should debounce callbacks by key and execute the last one for each key', async () => {
const { result } = renderHook(() =>
useKeyedDebouncedCallback(getSomeData, debounceTime)
useKeyedDebounceCallback(getSomeData, debounceTime)
);

// Call the debounced callback without key, it will debounce by default
Expand All @@ -145,7 +145,7 @@ describe('useKeyedDebouncedCallback', () => {

it('Should fail if passing non valid key', async () => {
const { result } = renderHook(() =>
useKeyedDebouncedCallback(getSomeData, debounceTime)
useKeyedDebounceCallback(getSomeData, debounceTime)
);

// Call the debounced callback without key, it will debounce by default
Expand Down