Use shared useDebouncedValue hook

src/features/liveNow/components/EditLiveDialog.tsx

@@ -9,6 +9,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {differenceInMinutes} from 'date-fns'
 
+import {useDebouncedValue} from '#/lib/hooks/useDebouncedValue'
 import {cleanError} from '#/lib/strings/errors'
 import {definitelyUrl} from '#/lib/strings/url-helpers'
 import {useTickEveryMinute} from '#/state/shell'
@@ -22,7 +23,6 @@ import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {
   displayDuration,
-  useDebouncedValue,
   useLiveLinkMetaQuery,
   useRemoveLiveStatusMutation,
   useUpsertLiveStatusMutation,

src/features/liveNow/components/GoLiveDialog.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useDebouncedValue} from '#/lib/hooks/useDebouncedValue'
 import {cleanError} from '#/lib/strings/errors'
 import {definitelyUrl} from '#/lib/strings/url-helpers'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
@@ -19,7 +20,6 @@ import {Text} from '#/components/Typography'
 import {
   displayDuration,
   getLiveServiceNames,
-  useDebouncedValue,
   useLiveLinkMetaQuery,
   useLiveNowConfig,
   useUpsertLiveStatusMutation,

src/features/liveNow/utils.ts

@@ -1,4 +1,3 @@
-import {useEffect, useState} from 'react'
 import {type I18n} from '@lingui/core'
 import {plural} from '@lingui/macro'
 
@@ -24,18 +23,6 @@ export function displayDuration(i18n: I18n, durationInMinutes: number) {
     : minutesString
 }
 
-// Trailing debounce
-export function useDebouncedValue<T>(val: T, delayMs: number): T {
-  const [prev, setPrev] = useState(val)
-
-  useEffect(() => {
-    const timeout = setTimeout(() => setPrev(val), delayMs)
-    return () => clearTimeout(timeout)
-  }, [val, delayMs])
-
-  return prev
-}
-
 const serviceUrlToNameMap: Record<string, string> = {
   'twitch.tv': 'Twitch',
   'www.twitch.tv': 'Twitch',