Fix React Strict mode behaviour

Author: xnimorz

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 10.0.4
+- Fix behaviour for strictMode react when leading is set to true and trailing is true 
+
 ## 10.0.3
 - Removed `peerDependency` part from `package.json` as NPM cannot correctly resolve `peerDependency` for beta and rc versions: see https://stackoverflow.com/questions/67934358/npm-including-all-range-of-pre-release-when-defining-peer-dependency for context
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-debounce",
-  "version": "10.0.3",
+  "version": "10.0.4-beta",
   "description": "Debounce hook for react",
   "source": "src/index.ts",
   "main": "dist/index.js",

src/useDebounce.ts

@@ -1,14 +1,10 @@
-import { useCallback, useRef, useReducer } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import useDebouncedCallback, { DebouncedState } from './useDebouncedCallback';
 
 function valueEquality<T>(left: T, right: T): boolean {
   return left === right;
 }
 
-function reducer<T>(_: T, action: T) {
-  return action;
-}
-
 export default function useDebounce<T>(
   value: T,
   delay: number,
@@ -21,9 +17,16 @@ export default function useDebounce<T>(
 ): [T, DebouncedState<(value: T) => void>] {
   const eq = (options && options.equalityFn) || valueEquality;
 
-  const [state, dispatch] = useReducer(reducer, value);
+  const activeValue = useRef(value);
+  const [, forceUpdate] = useState({});
   const debounced = useDebouncedCallback(
-    useCallback((value: T) => dispatch(value), [dispatch]),
+    useCallback(
+      (value: T) => {
+        activeValue.current = value;
+        forceUpdate({});
+      },
+      [forceUpdate]
+    ),
     delay,
     options
   );
@@ -34,9 +37,5 @@ export default function useDebounce<T>(
     previousValue.current = value;
   }
 
-  if (eq(state as T, value)) {
-    debounced.cancel();
-  }
-
-  return [state as T, debounced];
+  return [activeValue.current as T, debounced];
 }

test/useDebounce.test.tsx

@@ -65,7 +65,7 @@ describe('useDebounce', () => {
 
     // timeout shouldn't have been called yet after leading call was executed
     // @ts-ignore
-    expect(screen.getByRole('test')).toHaveTextContent('Hello again');
+    expect(screen.getByRole('test')).toHaveTextContent('Hello world');
 
     act(() => {
       jest.runAllTimers();
@@ -283,13 +283,13 @@ describe('useDebounce', () => {
 
     const tree = render(<Component text={'Hello'} />);
 
-    expect(eq).toHaveBeenCalledTimes(2);
+    expect(eq).toHaveBeenCalledTimes(1);
 
     act(() => {
       tree.rerender(<Component text="Test" />);
     });
 
-    expect(eq).toHaveBeenCalledTimes(4);
+    expect(eq).toHaveBeenCalledTimes(2);
     expect(eq).toHaveBeenCalledWith('Hello', 'Test');
     // Since the equality function always returns true, expect the value to stay the same
     // @ts-ignore
@@ -490,7 +490,7 @@ describe('useDebounce', () => {
     // @ts-ignore
     expect(screen.getByRole('value')).toHaveTextContent('Hello');
     // @ts-ignore
-    expect(screen.getByRole('pending')).toHaveTextContent('false');
+    expect(screen.getByRole('pending')).toHaveTextContent('true');
 
     act(() => {
       jest.runAllTimers();