Estoy tratando de aplicar un acelerador lodash por primera vez.
Sé que el acelerador debe aplicarse dentro de un useCallback o se llamará cada nuevo procesamiento (en mi caso, con cada nueva pulsación de tecla de una búsqueda de usuario).
El código que tengo es válido y la lógica parece tener sentido, pero el acelerador no se está aplicando, por lo que la llamada a la API se realiza con cada pulsación de tecla.
¿Algún consejo sobre dónde está fallando mi lógica?
import { useEffect, useCallback } from 'react'; import { throttle } from 'lodash'; import { getAllUsers } from '../../../api/api'; import { USER_ROLE } from '../../../types/types' interface IProps extends Omit<unknown, 'children'> { search?: string; } const DemoFanManagementTable = ({ search }: IProps): JSX.Element => { const getFans = (search?: string) => { console.log("getFans ran") const fans = getAllUsers({ search }, USER_ROLE.FAN); //logs a promise console.log("logging fans ", fans) return fans; } //throttledSearch is running every time search changes const throttledSearch = useCallback((search?: string) => { console.log("throttledSearch ran") return throttle( //throttle is not throttling, functions run every keystroke () => { getFans(search), 10000, { leading: true, trailing: true } } ) }, [search]) //useEffect is running every time search changes useEffect(() => { return throttledSearch(search) }, [search]); return ( <div> {search} </div> ); }; export default DemoFanManagementTable;Aquí hay algunos problemas, primero ha envuelto la función de throttle del orificio en una función anónima en lugar de solo el primer parámetro:
throttle( (search: string) => getFans(search), 1000, { leading: true, trailing: true } ) Second useCallback no es adecuado ya que cada vez que lo llama, devuelve una nueva función limitada.
En tercer lugar, ha pasado [search] como una dependencia de useCallback , por lo que incluso si funcionó como esperaba, se invalidaría cada vez que search cambia y no funcionaría de todos modos.
Una mejor opción es useMemo , ya que mantiene la misma función limitada en todos los renderizados.
const throttledSearch = useMemo( () => throttle( (search: string) => getFans(search), 10000, { leading: true, trailing: true } ), [] ); useEffect(() => { return throttledSearch(search); }, [search]);Dado que getFans toma el mismo parámetro de búsqueda, puede acortarlo a:
const throttledSearch = useMemo(() => throttle(getFans, 10000, { leading: true, trailing: true }), []);