mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Throttle gif search by 500ms (#3622)

* debounce gif search by 300ms

* Throttle it instead

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

authored by samuel.fm

Dan Abramov and committed by
GitHub
edbb18af 8b33ffdf

+30 -8
+3 -8
src/components/dialogs/GifSelect.tsx
··· 1 - import React, { 2 - useCallback, 3 - useDeferredValue, 4 - useMemo, 5 - useRef, 6 - useState, 7 - } from 'react' 1 + import React, {useCallback, useMemo, useRef, useState} from 'react' 8 2 import {TextInput, View} from 'react-native' 9 3 import {Image} from 'expo-image' 10 4 import {msg, Trans} from '@lingui/macro' ··· 22 16 import {atoms as a, useBreakpoints, useTheme} from '#/alf' 23 17 import * as Dialog from '#/components/Dialog' 24 18 import * as TextField from '#/components/forms/TextField' 19 + import {useThrottledValue} from '#/components/hooks/useThrottledValue' 25 20 import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow' 26 21 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' 27 22 import {InlineLinkText} from '#/components/Link' ··· 82 77 const {gtMobile} = useBreakpoints() 83 78 const ref = useRef<TextInput>(null) 84 79 const [undeferredSearch, setSearch] = useState('') 85 - const search = useDeferredValue(undeferredSearch) 80 + const search = useThrottledValue(undeferredSearch, 500) 86 81 87 82 const isSearching = search.length > 0 88 83
+27
src/components/hooks/useThrottledValue.ts
··· 1 + import {useEffect, useRef, useState} from 'react' 2 + 3 + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' 4 + 5 + export function useThrottledValue<T>(value: T, time?: number) { 6 + const pendingValueRef = useRef(value) 7 + const [throttledValue, setThrottledValue] = useState(value) 8 + 9 + useEffect(() => { 10 + pendingValueRef.current = value 11 + }, [value]) 12 + 13 + const handleTick = useNonReactiveCallback(() => { 14 + if (pendingValueRef.current !== throttledValue) { 15 + setThrottledValue(pendingValueRef.current) 16 + } 17 + }) 18 + 19 + useEffect(() => { 20 + const id = setInterval(handleTick, time) 21 + return () => { 22 + clearInterval(id) 23 + } 24 + }, [handleTick, time]) 25 + 26 + return throttledValue 27 + }