Create useThrottledState (#841)

* Create useThrottledState

* use defaultThrottleSettings

* fix failing test

* remove function condition

---------

Co-authored-by: Adhitya Mamallan <[email protected]>

Author: Assem-Uber

src/hooks/__tests__/use-throttled-state.test.tsx

@@ -0,0 +1,84 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import throttle from 'lodash/throttle';
+
+import useThrottledState from '../use-throttled-state';
+
+jest.mock('lodash/throttle', () => {
+  const original = jest.requireActual('lodash/throttle');
+  return jest.fn(original);
+});
+const mockedThrottle = throttle as jest.Mock;
+
+const defaultThrottleSettings = { leading: false, trailing: true };
+
+describe('useThrottledState', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    mockedThrottle.mockClear();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should initialize with the given value', () => {
+    const { result } = renderHook(() => useThrottledState(0));
+    expect(result.current[0]).toBe(0);
+  });
+
+  it('should pass the correct settings to throttle', () => {
+    renderHook(() => useThrottledState(0, 1, defaultThrottleSettings));
+    expect(mockedThrottle).toHaveBeenCalledWith(
+      expect.any(Function),
+      1,
+      defaultThrottleSettings
+    );
+  });
+
+  it('should immediately update if executeImmediately is true', () => {
+    const { result } = renderHook(() =>
+      useThrottledState(0, 10000, defaultThrottleSettings)
+    );
+    const setState = result.current[1];
+
+    act(() => {
+      setState((prev) => prev + 1, true);
+    });
+
+    expect(result.current[0]).toBe(1);
+  });
+
+  it('should return the latest value if rerendered externaly', async () => {
+    const { result, rerender } = renderHook(() =>
+      useThrottledState(0, 10000, defaultThrottleSettings)
+    );
+    const setState = result.current[1];
+
+    act(() => {
+      setState((prev) => prev + 1);
+      setState((prev) => prev + 1);
+      setState((prev) => prev + 1);
+    });
+
+    expect(result.current[0]).toBe(0);
+    rerender();
+    expect(result.current[0]).toBe(3);
+  });
+
+  it('should throttle updating state', async () => {
+    const { result } = renderHook(() =>
+      useThrottledState(0, 10000, defaultThrottleSettings)
+    );
+    const setState = result.current[1];
+
+    act(() => {
+      setState((prev) => prev + 1);
+      setState((prev) => prev + 1);
+      setState((prev) => prev + 1);
+    });
+
+    expect(result.current[0]).toBe(0);
+    jest.advanceTimersByTime(10000);
+    await waitFor(() => expect(result.current[0]).toBe(3));
+  });
+});

src/hooks/use-throttled-state.tsx

@@ -0,0 +1,38 @@
+import { useCallback, useState, useRef, useMemo, useEffect } from 'react';
+
+import type { ThrottleSettings } from 'lodash';
+import throttle from 'lodash/throttle';
+
+export default function useThrottledState<State>(
+  initValue: State,
+  throttleMillis = 700,
+  throttleOptions: ThrottleSettings = {}
+) {
+  const { leading, trailing } = throttleOptions;
+  const stateRef = useRef(initValue);
+  const [, setState] = useState<State>(initValue);
+
+  const throttledRerender = useMemo(
+    () => throttle(setState, throttleMillis, { leading, trailing }),
+    [setState, throttleMillis, leading, trailing]
+  );
+
+  // clear previous throttled events
+  useEffect(() => {
+    return () => throttledRerender.cancel();
+  }, [throttledRerender]);
+
+  const refSetState = useCallback(
+    (callback: (arg: State) => State, executeImmediately?: boolean): void => {
+      const newVal = callback(stateRef.current);
+      stateRef.current = newVal;
+      throttledRerender(newVal);
+      if (executeImmediately) {
+        throttledRerender.flush();
+      }
+    },
+    [throttledRerender]
+  );
+
+  return [stateRef.current, refSetState] as const;
+}