Merge pull request #199 from elrion018/fix/cancel-ispending-ui-update

Fix/cancel ispending UI update

Author: xnimorz

src/useDebouncedCallback.ts

@@ -286,7 +286,8 @@ export default function useDebouncedCallback<
     };
 
     func.cancel = () => {
-      if (timerId.current) {
+      const hadTimer = timerId.current;
+      if (hadTimer) {
         useRAF
           ? cancelAnimationFrame(timerId.current)
           : clearTimeout(timerId.current);
@@ -297,6 +298,11 @@ export default function useDebouncedCallback<
         lastThis.current =
         timerId.current =
           null;
+
+      // Notify React to re-render when cancel is called and there was an active timer
+      if (hadTimer && forceUpdate) {
+        forceUpdate({});
+      }
     };
 
     func.isPending = () => {

test/useDebounce.test.tsx

@@ -538,4 +538,50 @@ describe('useDebounce', () => {
     // @ts-ignore
     expect(screen.getByRole('pending')).toHaveTextContent('false');
   });
+
+  it('Updates isPending UI when cancel is called', () => {
+    function Component({ text }) {
+      const [value, { cancel, isPending }] = useDebounce(text, 1000);
+      return (
+        <div>
+          <div role="value">{value}</div>
+          <div role="pending">{isPending().toString()}</div>
+          <button role="cancel" onClick={() => cancel()}>
+            Cancel
+          </button>
+        </div>
+      );
+    }
+
+    const tree = render(<Component text={'Hello'} />);
+
+    // Initially, not pending
+    // @ts-ignore
+    expect(screen.getByRole('value')).toHaveTextContent('Hello');
+    // @ts-ignore
+    expect(screen.getByRole('pending')).toHaveTextContent('false');
+
+    // Update text to trigger debounce
+    act(() => {
+      tree.rerender(<Component text={'World'} />);
+    });
+
+    // Should be pending now
+    // @ts-ignore
+    expect(screen.getByRole('value')).toHaveTextContent('Hello');
+    // @ts-ignore
+    expect(screen.getByRole('pending')).toHaveTextContent('true');
+
+    // Click cancel button
+    act(() => {
+      // @ts-ignore
+      screen.getByRole('cancel').click();
+    });
+
+    // After cancel, should not be pending and UI should update
+    // @ts-ignore
+    expect(screen.getByRole('value')).toHaveTextContent('Hello');
+    // @ts-ignore
+    expect(screen.getByRole('pending')).toHaveTextContent('false');
+  });
 });