diff --git a/src/store/reducers/settings/useSetting.ts b/src/store/reducers/settings/useSetting.ts index 70e5cde325..4a51f3a7e4 100644 --- a/src/store/reducers/settings/useSetting.ts +++ b/src/store/reducers/settings/useSetting.ts @@ -1,9 +1,7 @@ import React from 'react'; import {skipToken} from '@reduxjs/toolkit/query'; -import {debounce} from 'lodash'; -import type {SetSingleSettingParams} from '../../../types/api/settings'; import {uiFactory} from '../../../uiFactory/uiFactory'; import {useTypedDispatch} from '../../../utils/hooks/useTypedDispatch'; import {useTypedSelector} from '../../../utils/hooks/useTypedSelector'; @@ -22,15 +20,11 @@ import { type SaveSettingValue = (value: T | undefined) => void; -interface UseSettingOptions { - /** Time before setting will be set */ - debounceTime?: number; -} - -export function useSetting( - name?: string, - {debounceTime = 0}: UseSettingOptions = {}, -): {value: T | undefined; saveValue: SaveSettingValue; isLoading: boolean} { +export function useSetting(name?: string): { + value: T | undefined; + saveValue: SaveSettingValue; + isLoading: boolean; +} { const dispatch = useTypedDispatch(); const preventSyncWithLS = Boolean(name && SETTINGS_OPTIONS[name]?.preventSyncWithLS); @@ -80,23 +74,10 @@ export function useSetting( } }, [shouldUseMetaSettings, shouldUseOnlyExternalSettings, metaSetting, name, dispatch]); - const debouncedSetMetaSetting = React.useMemo( - () => - debounce((params: SetSingleSettingParams) => { - setMetaSetting(params); - }, debounceTime), - [debounceTime, setMetaSetting], - ); - - // Call debounced func on component unmount - React.useEffect(() => { - return () => debouncedSetMetaSetting.flush(); - }, [debouncedSetMetaSetting]); - const saveValue = React.useCallback>( (value) => { if (shouldUseMetaSettings) { - debouncedSetMetaSetting({ + setMetaSetting({ user, name: name, value: stringifySettingValue(value), @@ -107,7 +88,7 @@ export function useSetting( setSettingValueToLS(name, value); } }, - [shouldUseMetaSettings, shouldUseOnlyExternalSettings, user, name, debouncedSetMetaSetting], + [shouldUseMetaSettings, shouldUseOnlyExternalSettings, user, name, setMetaSetting], ); return {value: settingValue, saveValue, isLoading} as const; diff --git a/src/utils/hooks/useTableResize.ts b/src/utils/hooks/useTableResize.ts index 9e32f6b889..7bbfdcf01b 100644 --- a/src/utils/hooks/useTableResize.ts +++ b/src/utils/hooks/useTableResize.ts @@ -1,6 +1,7 @@ import React from 'react'; import type {ColumnWidthByName, HandleResize} from '@gravity-ui/react-data-table'; +import {debounce} from 'lodash'; import {useSetting} from '../../store/reducers/settings/useSetting'; @@ -11,9 +12,20 @@ export const useTableResize = ( value: sizes, saveValue: saveSizes, isLoading, - } = useSetting(localStorageKey, { - debounceTime: 300, - }); + } = useSetting(localStorageKey); + + const debouncedSaveSizes = React.useMemo( + () => + debounce((newSizes: ColumnWidthByName) => { + saveSizes(newSizes); + }, 300), + [saveSizes], + ); + + // Call debounced func on component unmount + React.useEffect(() => { + return () => debouncedSaveSizes.flush(); + }, [debouncedSaveSizes]); const [actualSizes, setActualSizes] = React.useState(() => { return sizes ?? ({} as ColumnWidthByName); @@ -30,11 +42,11 @@ export const useTableResize = ( ...previousSetup, [columnId]: columnWidth, }; - saveSizes(setup); + debouncedSaveSizes(setup); return setup; }); }, - [saveSizes], + [debouncedSaveSizes], ); return [actualSizes, handleSetupChange, isLoading];