feat: add useDebouncedState hook

Author: kyletsang

src/useDebouncedState.ts

@@ -0,0 +1,27 @@
+import { useState, Dispatch, SetStateAction } from 'react'
+import useDebouncedCallback from './useDebouncedCallback'
+
+/**
+ * Similar to `useState`, except the setter function is debounced by
+ * the specified delay.
+ *
+ * ```ts
+ * const [value, setValue] = useDebouncedState('test', 500)
+ *
+ * setValue('test2')
+ * ```
+ *
+ * @param initialState initial state value
+ * @param delay The milliseconds delay before a new value is set
+ */
+export default function useDebouncedState<T>(
+  initialState: T,
+  delay: number,
+): [T, Dispatch<SetStateAction<T>>] {
+  const [state, setState] = useState(initialState)
+  const debouncedSetState = useDebouncedCallback<Dispatch<SetStateAction<T>>>(
+    setState,
+    delay,
+  )
+  return [state, debouncedSetState]
+}

test/useDebouncedState.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { act } from 'react-dom/test-utils'
+import useDebouncedState from '../src/useDebouncedState'
+
+describe('useDebouncedState', () => {
+  it('should return a function that debounces input callback', () => {
+    jest.useFakeTimers()
+
+    let outerSetValue
+
+    function Wrapper() {
+      const [value, setValue] = useDebouncedState(0, 500)
+      outerSetValue = setValue
+      return <span>{value}</span>
+    }
+
+    const wrapper = mount(<Wrapper />)
+    expect(wrapper.text()).toBe('0')
+
+    outerSetValue((cur: number) => cur + 1)
+    outerSetValue((cur: number) => cur + 1)
+    outerSetValue((cur: number) => cur + 1)
+    outerSetValue((cur: number) => cur + 1)
+    outerSetValue((cur: number) => cur + 1)
+
+    expect(wrapper.text()).toBe('0')
+
+    act(() => {
+      jest.runOnlyPendingTimers()
+    })
+    
+    expect(wrapper.text()).toBe('1')
+  })
+})