refactor(chore):3896-replace-lodash-debounce-to-useDebounce (#4814)

Close: #3896 

## PR Details

Changed `lodash.debounce` to `useDebounce`.

Co-authored-by: VoitovychDM <voitovych.dm.m@gmail.com>

packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
-import debounce from 'lodash.debounce';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { MultipleObjectRecordOnClickOutsideEffect } from '@/object-record/relation-picker/components/MultipleObjectRecordOnClickOutsideEffect';
 import { MultipleObjectRecordSelectItem } from '@/object-record/relation-picker/components/MultipleObjectRecordSelectItem';
@@ -83,7 +83,7 @@ export const MultipleObjectRecordSelect = ({
     }
   }, [selectedObjectRecordsForSelect, loading]);
 
-  const debouncedSetSearchFilter = debounce(setSearchFilter, 100, {
+  const debouncedSetSearchFilter = useDebouncedCallback(setSearchFilter, 100, {
     leading: true,
   });
 

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useEntitySelectSearch.ts

@@ -1,4 +1,4 @@
-import debounce from 'lodash.debounce';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 
@@ -14,7 +14,7 @@ export const useEntitySelectSearch = ({
     setRelationPickerSearchFilter,
   } = useRelationPicker({ relationPickerScopeId });
 
-  const debouncedSetSearchFilter = debounce(
+  const debouncedSetSearchFilter = useDebouncedCallback(
     setRelationPickerSearchFilter,
     100,
     {

packages/twenty-front/src/modules/settings/profile/components/NameFields.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
-import debounce from 'lodash.debounce';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@@ -46,7 +46,7 @@ export const NameFields = ({
   });
 
   // TODO: Enhance this with react-web-hook-form (https://www.react-hook-form.com)
-  const debouncedUpdate = debounce(async () => {
+  const debouncedUpdate = useDebouncedCallback(async () => {
     onFirstNameUpdate?.(firstName);
     onLastNameUpdate?.(lastName);
 

packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
-import debounce from 'lodash.debounce';
 import { useRecoilValue } from 'recoil';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { TextInput } from '@/ui/input/components/TextInput';
@@ -38,7 +38,7 @@ export const NameField = ({
   // TODO: Enhance this with react-web-hook-form (https://www.react-hook-form.com)
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedUpdate = useCallback(
-    debounce(async (name: string) => {
+    useDebouncedCallback(async (name: string) => {
       if (isDefined(onNameUpdate)) {
         onNameUpdate(displayName);
       }

packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -9,8 +9,8 @@ import {
   size,
   useFloating,
 } from '@floating-ui/react';
-import debounce from 'lodash.debounce';
 import { ReadonlyDeep } from 'type-fest';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { SelectOption } from '@/spreadsheet-import/types';
 import { AppTooltip } from '@/ui/display/tooltip/AppTooltip';
@@ -72,9 +72,13 @@ export const MatchColumnSelect = ({
     [initialOptions],
   );
 
-  const debouncedHandleSearchFilter = debounce(handleSearchFilterChange, 100, {
+  const debouncedHandleSearchFilter = useDebouncedCallback(
-    leading: true,
+    handleSearchFilterChange,
-  });
+    100,
+    {
+      leading: true,
+    },
+  );
 
   const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.currentTarget.value;

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
-import debounce from 'lodash.debounce';
+import { useDebouncedCallback } from 'use-debounce';
 
 import {
   H1Title,
@@ -78,7 +78,7 @@ export const ConfirmationModal = ({
     isValueMatchingInput(confirmationValue, value);
   };
 
-  const isValueMatchingInput = debounce(
+  const isValueMatchingInput = useDebouncedCallback(
     (value?: string, inputValue?: string) => {
       setIsValidValue(Boolean(value && inputValue && value === inputValue));
     },