Skip to content

Chore: Create useDebounce hook #4470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dnlsilva merged 6 commits into from
Sep 16, 2022
Merged

Chore: Create useDebounce hook #4470

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
525e3a5
create useDebounce hook
dnlsilva Aug 25, 2022
9b967dd
fix types
dnlsilva Aug 25, 2022
d669fdd
apply useDebounce hook
dnlsilva Aug 25, 2022
3c0cdd2
migrate to use-debounce lib
dnlsilva Sep 9, 2022
926cbf4
remove useless useDebounce
dnlsilva Sep 9, 2022
ab41ac0
Merge branch 'develop' into use-debounce
dnlsilva Sep 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/lib/methods/helpers/debounce.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useCallback } from 'react';

export function debounce(func: Function, wait?: number, immediate?: boolean) {
let timeout: ReturnType<typeof setTimeout> | null;
function _debounce(...args: any[]) {
Expand All @@ -21,3 +23,7 @@ export function debounce(func: Function, wait?: number, immediate?: boolean) {
_debounce.stop = () => clearTimeout(timeout!);
return _debounce;
}

export function useDebounce(func: Function, wait?: number, immediate?: boolean): (...args: any[]) => void {

@diegolmello diegolmello Sep 8, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We discussed this internally, but we should consider using a lib instead of creating our own.

My main concern is related to the useCallback usage and here's why https://github.com/xnimorz/use-debounce/blob/8020962aed8038c065f9468fd7cf1d9a1751ce62/src/useDebouncedCallback.ts#L150

return useCallback(debounce(func, wait, immediate), []);
}
15 changes: 6 additions & 9 deletions app/views/CannedResponsesListView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -187,12 +187,9 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
}
}, [departments, cannedResponses]);

const searchCallback = useCallback(
debounce(async (text = '', department = '', depId = '') => {
await getListCannedResponse({ text, department, depId, debounced: true });
}, 1000),
[]
); // use debounce with useCallback https://stackoverflow.com/a/58594890
const searchCallback = useDebounce(async (text = '', department = '', depId = '') => {
await getListCannedResponse({ text, department, depId, debounced: true });
}, 1000);

useEffect(() => {
getRoomFromDb();
Expand Down
8 changes: 4 additions & 4 deletions app/views/DiscussionsView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -145,7 +145,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
navigation.setOptions(options);
}, [navigation, isSearching]);

const onDiscussionPress = debounce(
const onDiscussionPress = useDebounce(
(item: TThreadModel) => {
if (item.drid && item.t) {
navigation.push('RoomView', {
Expand Down