Chore: Create useDebounce hook (#4470)

* create useDebounce hook

* fix types

* apply useDebounce hook

* migrate to use-debounce lib

* remove useless useDebounce

app/lib/methods/helpers/debounce.ts

@@ -1,3 +1,5 @@
+import { useDebouncedCallback } from 'use-debounce';
+
 export function debounce(func: Function, wait?: number, immediate?: boolean) {
 	let timeout: ReturnType<typeof setTimeout> | null;
 	function _debounce(...args: any[]) {
@@ -21,3 +23,7 @@ export function debounce(func: Function, wait?: number, immediate?: boolean) {
 	_debounce.stop = () => clearTimeout(timeout!);
 	return _debounce;
 }
+
+export function useDebounce(func: (...args: any) => any, wait?: number): (...args: any[]) => void {
+	return useDebouncedCallback(func, wait || 1000);
+}

app/views/CannedResponsesListView/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FlatList } from 'react-native';
 import { RouteProp } from '@react-navigation/native';
 import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
@@ -24,7 +24,7 @@ import DropdownItemHeader from './Dropdown/DropdownItemHeader';
 import styles from './styles';
 import { ICannedResponse } from '../../definitions/ICannedResponse';
 import { ChatsStackParamList } from '../../stacks/types';
-import { getRoomTitle, getUidDirectMessage, debounce } from '../../lib/methods/helpers';
+import { getRoomTitle, getUidDirectMessage, useDebounce } from '../../lib/methods/helpers';
 import { Services } from '../../lib/services';
 import { ILivechatDepartment } from '../../definitions/ILivechatDepartment';
 import { useAppSelector } from '../../lib/hooks';
@@ -88,7 +88,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 		}
 	};
 
-	const getDepartments = debounce(async () => {
+	const getDepartments = useDebounce(async () => {
 		try {
 			const res = await Services.getDepartments();
 			if (res.success) {
@@ -187,12 +187,9 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 		}
 	}, [departments, cannedResponses]);
 
-	const searchCallback = useCallback(
-		debounce(async (text = '', department = '', depId = '') => {
+	const searchCallback = useDebounce(async (text = '', department = '', depId = '') => {
 		await getListCannedResponse({ text, department, depId, debounced: true });
-		}, 1000),
-		[]
-	); // use debounce with useCallback https://stackoverflow.com/a/58594890
+	}, 1000);
 
 	useEffect(() => {
 		getRoomFromDb();

app/views/DiscussionsView/index.tsx

@@ -10,7 +10,7 @@ import ActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import log from '../../lib/methods/helpers/log';
-import { debounce, isIOS } from '../../lib/methods/helpers';
+import { isIOS, useDebounce } from '../../lib/methods/helpers';
 import SafeAreaView from '../../containers/SafeAreaView';
 import * as HeaderButton from '../../containers/HeaderButton';
 import * as List from '../../containers/List';
@@ -81,10 +81,10 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 		}
 	};
 
-	const onSearchChangeText = debounce(async (text: string) => {
+	const onSearchChangeText = useDebounce(async (text: string) => {
 		setIsSearching(true);
 		await load(text);
-	}, 300);
+	}, 500);
 
 	const onCancelSearchPress = () => {
 		setIsSearching(false);
@@ -145,8 +145,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 		navigation.setOptions(options);
 	}, [navigation, isSearching]);
 
-	const onDiscussionPress = debounce(
-		(item: TThreadModel) => {
+	const onDiscussionPress = (item: TThreadModel) => {
 		if (item.drid && item.t) {
 			navigation.push('RoomView', {
 				rid: item.drid,
@@ -155,10 +154,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 				t
 			});
 		}
-		},
-		1000,
-		true
-	);
+	};
 
 	const renderItem = ({ item }: { item: IMessageFromServer }) => (
 		<Item

package.json

@@ -137,6 +137,7 @@
 		"ua-parser-js": "^1.0.2",
 		"uri-js": "^4.4.1",
 		"url-parse": "1.5.10",
+		"use-debounce": "^8.0.4",
 		"use-deep-compare-effect": "1.6.1",
 		"xregexp": "5.0.2",
 		"yup": "^0.32.11"

yarn.lock

@@ -20213,6 +20213,11 @@ use-composed-ref@^1.3.0:
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
   integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
 
+use-debounce@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-8.0.4.tgz#27e93b2f010bd0b8ad06e9fc7de891d9ee5d6b8e"
+  integrity sha512-fGqsYQzl8kLHF2QpQSgIwgOgJmnh6j5L6SIzQiHdLfwp3q1egUL3btq5Bg2SJysH6A0ILLgT2IqXZKoNJr0nFw==
+
 use-deep-compare-effect@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.6.1.tgz#061a0ac5400aa0461e33dddfaa2a98bca873182a"