fix: rename useThrottleCallback and useDebounceCallback

README.md

@@ -60,11 +60,11 @@ import { useMountEffect } from "@react-hookz/web/esnext";
 
 - #### Callback
 
-  - [**`useDebounceCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-usedebouncecallback)
+  - [**`useDebouncedCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-usedebouncedcallback)
     — Makes passed function debounced, otherwise acts like `useCallback`.
   - [**`useRafCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-userafcallback)
     — Makes passed function to be called within next animation frame.
-  - [**`useThrottleCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-usethrottlecallback)
+  - [**`useThrottledCallback`**](https://react-hookz.github.io/web/?path=/docs/callback-usethrottledcallback)
     — Makes passed function throttled, otherwise acts like `useCallback`.
 
 - #### Lifecycle

src/index.ts

@@ -1,7 +1,7 @@
 // Callback
-export { useDebounceCallback } from './useDebounceCallback/useDebounceCallback';
+export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
 export { useRafCallback } from './useRafCallback/useRafCallback';
-export { useThrottleCallback } from './useThrottleCallback/useThrottleCallback';
+export { useThrottledCallback } from './useThrottledCallback/useThrottledCallback';
 
 // Livecycle
 export {

src/useDebounceCallback/__docs__/example.stories.tsx → src/useDebouncedCallback/__docs__/example.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { useDebounceCallback } from '../..';
+import { useDebouncedCallback } from '../..';
 
 export const Example: React.FC = () => {
   const [state, setState] = useState('');
 
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = useDebounceCallback(
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = useDebouncedCallback(
     (ev) => {
       setState(ev.target.value);
     },

src/useDebounceCallback/__docs__/story.mdx → src/useDebouncedCallback/__docs__/story.mdx

@@ -1,9 +1,9 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { Example } from './example.stories';
 
-<Meta title="Callback/useDebounceCallback" component={Example} />
+<Meta title="Callback/useDebouncedCallback" component={Example} />
 
-# useDebounceCallback
+# useDebouncedCallback
 
 The third argument is a list of dependencies, as for `useCallback`.
 
@@ -22,7 +22,7 @@ The third argument is a list of dependencies, as for `useCallback`.
 ## Reference
 
 ```ts
-function useDebounceCallback<T extends unknown[]>(
+function useDebouncedCallback<T extends unknown[]>(
   cb: (...args: T) => unknown,
   delay: number,
   deps: React.DependencyList

src/useDebounceCallback/__tests__/dom.ts → src/useDebouncedCallback/__tests__/dom.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks/dom';
-import { useDebounceCallback } from '../..';
+import { useDebouncedCallback } from '../..';
 
-describe('useDebounceCallback', () => {
+describe('useDebouncedCallback', () => {
   beforeAll(() => {
     jest.useFakeTimers();
   });
@@ -11,35 +11,35 @@ describe('useDebounceCallback', () => {
   });
 
   it('should be defined', () => {
-    expect(useDebounceCallback).toBeDefined();
+    expect(useDebouncedCallback).toBeDefined();
   });
 
   it('should render', () => {
     const { result } = renderHook(() => {
-      useDebounceCallback(() => {}, 200, []);
+      useDebouncedCallback(() => {}, 200, []);
     });
     expect(result.error).toBeUndefined();
   });
 
   it('should return function same length and wrapped name', () => {
     let { result } = renderHook(() =>
-      useDebounceCallback((_a: any, _b: any, _c: any) => {}, 200, [])
+      useDebouncedCallback((_a: any, _b: any, _c: any) => {}, 200, [])
     );
 
     expect(result.current.length).toBe(3);
     expect(result.current.name).toBe(`anonymous__debounced__200`);
 
     function testFn(_a: any, _b: any, _c: any) {}
 
-    result = renderHook(() => useDebounceCallback(testFn, 100, [])).result;
+    result = renderHook(() => useDebouncedCallback(testFn, 100, [])).result;
 
     expect(result.current.length).toBe(3);
     expect(result.current.name).toBe(`testFn__debounced__100`);
   });
 
   it('should return new callback if delay is changed', () => {
     const { result, rerender } = renderHook(
-      ({ delay }) => useDebounceCallback(() => {}, delay, []),
+      ({ delay }) => useDebouncedCallback(() => {}, delay, []),
       {
         initialProps: { delay: 200 },
       }
@@ -53,7 +53,7 @@ describe('useDebounceCallback', () => {
 
   it('should run given callback only after specified delay since last call', () => {
     const cb = jest.fn();
-    const { result } = renderHook(() => useDebounceCallback(cb, 200, []));
+    const { result } = renderHook(() => useDebouncedCallback(cb, 200, []));
 
     result.current();
     expect(cb).not.toHaveBeenCalled();
@@ -71,7 +71,7 @@ describe('useDebounceCallback', () => {
   it('should pass parameters to callback', () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const cb = jest.fn((_a: number, _c: string) => {});
-    const { result } = renderHook(() => useDebounceCallback(cb, 200, []));
+    const { result } = renderHook(() => useDebouncedCallback(cb, 200, []));
 
     result.current(1, 'abc');
     jest.advanceTimersByTime(200);
@@ -83,7 +83,7 @@ describe('useDebounceCallback', () => {
     const cb2 = jest.fn(() => {});
 
     const { result, rerender } = renderHook(
-      ({ i }) => useDebounceCallback(() => (i === 1 ? cb1() : cb2()), 200, [i]),
+      ({ i }) => useDebouncedCallback(() => (i === 1 ? cb1() : cb2()), 200, [i]),
       { initialProps: { i: 1 } }
     );
 

src/useDebounceCallback/__tests__/ssr.ts → src/useDebouncedCallback/__tests__/ssr.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks/server';
-import { useDebounceCallback } from '../..';
+import { useDebouncedCallback } from '../..';
 
-describe('useDebounceCallback', () => {
+describe('useDebouncedCallback', () => {
   beforeAll(() => {
     jest.useFakeTimers();
   });
@@ -11,19 +11,19 @@ describe('useDebounceCallback', () => {
   });
 
   it('should be defined', () => {
-    expect(useDebounceCallback).toBeDefined();
+    expect(useDebouncedCallback).toBeDefined();
   });
 
   it('should render', () => {
     const { result } = renderHook(() => {
-      useDebounceCallback(() => {}, 200, []);
+      useDebouncedCallback(() => {}, 200, []);
     });
     expect(result.error).toBeUndefined();
   });
 
   it('should run given callback only after specified delay since last call', () => {
     const cb = jest.fn();
-    const { result } = renderHook(() => useDebounceCallback(cb, 200, []));
+    const { result } = renderHook(() => useDebouncedCallback(cb, 200, []));
 
     result.current();
     expect(cb).not.toHaveBeenCalled();
@@ -41,7 +41,7 @@ describe('useDebounceCallback', () => {
   it('should pass parameters to callback', () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const cb = jest.fn((_a: number, _c: string) => {});
-    const { result } = renderHook(() => useDebounceCallback(cb, 200, []));
+    const { result } = renderHook(() => useDebouncedCallback(cb, 200, []));
 
     result.current(1, 'abc');
     jest.advanceTimersByTime(200);

src/useDebounceCallback/useDebounceCallback.ts → src/useDebouncedCallback/useDebouncedCallback.ts

@@ -8,7 +8,7 @@ import { DependencyList, useMemo, useRef } from 'react';
  * @param delay Debounce delay.
  * @param deps Dependencies list when to update callback.
  */
-export function useDebounceCallback<T extends (...args: any[]) => any>(
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
   cb: T,
   delay: number,
   deps: DependencyList

src/useRafCallback/__tests__/dom.ts

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks/dom';
-import { useDebounceCallback, useRafCallback } from '../..';
+import { useDebouncedCallback, useRafCallback } from '../..';
 
 describe('useRafCallback', () => {
   const raf = global.requestAnimationFrame;

src/useResizeObserver/__docs__/example.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { IUseResizeObserverCallback, useDebounceCallback, useResizeObserver } from '../..';
+import { IUseResizeObserverCallback, useDebouncedCallback, useResizeObserver } from '../..';
 
 export const Example: React.FC = () => {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -28,7 +28,7 @@ export const Example: React.FC = () => {
 export const ExampleDebounced: React.FC = () => {
   const ref = useRef<HTMLDivElement | null>(null);
   const [rect, setRect] = useState<DOMRectReadOnly>();
-  const cb = useDebounceCallback<IUseResizeObserverCallback>((e) => setRect(e.contentRect), 500, [
+  const cb = useDebouncedCallback<IUseResizeObserverCallback>((e) => setRect(e.contentRect), 500, [
     setRect,
   ]);
   useResizeObserver(ref, cb);

src/useThrottleCallback/__docs__/example.stories.tsx → src/useThrottledCallback/__docs__/example.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { useThrottleCallback } from '../..';
+import { useThrottledCallback } from '../..';
 
 export const Example: React.FC = () => {
   const [state, setState] = useState('');
 
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = useThrottleCallback(
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = useThrottledCallback(
     (ev) => {
       setState(ev.target.value);
     },

src/useThrottleCallback/__docs__/story.mdx → src/useThrottledCallback/__docs__/story.mdx

@@ -1,9 +1,9 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { Example } from './example.stories';
 
-<Meta title="Callback/useThrottleCallback" component={Example} />
+<Meta title="Callback/useThrottledCallback" component={Example} />
 
-# useThrottleCallback
+# useThrottledCallback
 
 Makes passed function throttled, otherwise acts like `useCallback`.  
 [\[What is throttling?\]](https://css-tricks.com/debouncing-throttling-explained-examples/#throttle)
@@ -23,7 +23,7 @@ Makes passed function throttled, otherwise acts like `useCallback`.
 ## Reference
 
 ```ts
-function useThrottleCallback<T extends unknown[]>(
+function useThrottledCallback<T extends unknown[]>(
   cb: (...args: T) => unknown,
   delay: number,
   deps: React.DependencyList

src/useThrottleCallback/__tests__/dom.ts → src/useThrottledCallback/__tests__/dom.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks/dom';
-import { useThrottleCallback } from '../..';
+import { useThrottledCallback } from '../..';
 
-describe('useThrottleCallback', () => {
+describe('useThrottledCallback', () => {
   beforeAll(() => {
     jest.useFakeTimers();
   });
@@ -11,35 +11,35 @@ describe('useThrottleCallback', () => {
   });
 
   it('should be defined', () => {
-    expect(useThrottleCallback).toBeDefined();
+    expect(useThrottledCallback).toBeDefined();
   });
 
   it('should render', () => {
     const { result } = renderHook(() => {
-      useThrottleCallback(() => {}, 200, []);
+      useThrottledCallback(() => {}, 200, []);
     });
     expect(result.error).toBeUndefined();
   });
 
   it('should return function same length and wrapped name', () => {
     let { result } = renderHook(() =>
-      useThrottleCallback((_a: any, _b: any, _c: any) => {}, 200, [])
+      useThrottledCallback((_a: any, _b: any, _c: any) => {}, 200, [])
     );
 
     expect(result.current.length).toBe(3);
     expect(result.current.name).toBe(`anonymous__throttled__200`);
 
     function testFn(_a: any, _b: any, _c: any) {}
 
-    result = renderHook(() => useThrottleCallback(testFn, 100, [])).result;
+    result = renderHook(() => useThrottledCallback(testFn, 100, [])).result;
 
     expect(result.current.length).toBe(3);
     expect(result.current.name).toBe(`testFn__throttled__100`);
   });
 
   it('should return new callback if delay is changed', () => {
     const { result, rerender } = renderHook(
-      ({ delay }) => useThrottleCallback(() => {}, delay, []),
+      ({ delay }) => useThrottledCallback(() => {}, delay, []),
       {
         initialProps: { delay: 200 },
       }
@@ -53,7 +53,7 @@ describe('useThrottleCallback', () => {
 
   it('should invoke given callback immediately', () => {
     const cb = jest.fn();
-    const { result } = renderHook(() => useThrottleCallback(cb, 200, []));
+    const { result } = renderHook(() => useThrottledCallback(cb, 200, []));
 
     result.current();
     expect(cb).toHaveBeenCalledTimes(1);
@@ -62,15 +62,15 @@ describe('useThrottleCallback', () => {
   it('should pass parameters to callback', () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const cb = jest.fn((_a: number, _c: string) => {});
-    const { result } = renderHook(() => useThrottleCallback(cb, 200, []));
+    const { result } = renderHook(() => useThrottledCallback(cb, 200, []));
 
     result.current(1, 'abc');
     expect(cb).toHaveBeenCalledWith(1, 'abc');
   });
 
   it('should ignore consequential calls occurred within delay, but execute last call after delay is passed', () => {
     const cb = jest.fn();
-    const { result } = renderHook(() => useThrottleCallback(cb, 200, []));
+    const { result } = renderHook(() => useThrottledCallback(cb, 200, []));
 
     result.current();
     result.current();
@@ -90,7 +90,7 @@ describe('useThrottleCallback', () => {
 
   it('should drop trailing execution if `noTrailing is set to true`', () => {
     const cb = jest.fn();
-    const { result } = renderHook(() => useThrottleCallback(cb, 200, [], true));
+    const { result } = renderHook(() => useThrottledCallback(cb, 200, [], true));
 
     result.current();
     result.current();

src/useThrottleCallback/__tests__/ssr.ts → src/useThrottledCallback/__tests__/ssr.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks/server';
-import { useThrottleCallback } from '../..';
+import { useThrottledCallback } from '../..';
 
-describe('useThrottleCallback', () => {
+describe('useThrottledCallback', () => {
   beforeAll(() => {
     jest.useFakeTimers();
   });
@@ -11,19 +11,19 @@ describe('useThrottleCallback', () => {
   });
 
   it('should be defined', () => {
-    expect(useThrottleCallback).toBeDefined();
+    expect(useThrottledCallback).toBeDefined();
   });
 
   it('should render', () => {
     const { result } = renderHook(() => {
-      useThrottleCallback(() => {}, 200, []);
+      useThrottledCallback(() => {}, 200, []);
     });
     expect(result.error).toBeUndefined();
   });
 
   it('should invoke given callback immediately', () => {
     const cb = jest.fn();
-    const { result } = renderHook(() => useThrottleCallback(cb, 200, []));
+    const { result } = renderHook(() => useThrottledCallback(cb, 200, []));
 
     result.current();
     expect(cb).toHaveBeenCalledTimes(1);
@@ -32,7 +32,7 @@ describe('useThrottleCallback', () => {
   it('should pass parameters to callback', () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const cb = jest.fn((_a: number, _c: string) => {});
-    const { result } = renderHook(() => useThrottleCallback(cb, 200, []));
+    const { result } = renderHook(() => useThrottledCallback(cb, 200, []));
 
     result.current(1, 'abc');
     jest.advanceTimersByTime(200);

src/useThrottleCallback/useThrottleCallback.ts → src/useThrottledCallback/useThrottledCallback.ts

@@ -16,7 +16,7 @@ export interface IThrottledFunction<Args extends any[], This> {
  * `delay` milliseconds, otherwise, callback will be executed one final time
  * after the last throttled-function call.
  */
-export function useThrottleCallback<Args extends any[], This>(
+export function useThrottledCallback<Args extends any[], This>(
   callback: (this: This, ...args: Args) => any,
   delay: number,
   deps: DependencyList,

src/useValidator/__docs__/example.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { IValidatorDeferred, useDebounceCallback, useValidator } from '../..';
+import { IValidatorDeferred, useDebouncedCallback, useValidator } from '../..';
 
 export const ExampleStories: React.FC = () => {
   const [text, setText] = useState('');
@@ -11,7 +11,7 @@ export const ExampleStories: React.FC = () => {
 
   // debounced callback is deferred callback so we should use deferred type
   // of validator (the one that receives dispatcher as an argument)
-  const validator = useDebounceCallback<IValidatorDeferred<ITextValidityState>>(
+  const validator = useDebouncedCallback<IValidatorDeferred<ITextValidityState>>(
     (d) => {
       const isValid = !text.length || text.length % 2 === 1;