@@ -4,7 +4,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState, type RefObject
44import { useInfiniteScroll } from "@/hooks/use-infinite-scroll" ;
55import { useAuthState } from "react-firebase-hooks/auth" ;
66import { useTranslations } from "next-intl" ;
7- import debounce from "lodash/ debounce" ;
7+ import { useDebouncedCallback } from "use- debounce" ;
88import { auth } from "@/database/firebase" ;
99import {
1010 createCodeSnippetApi ,
@@ -313,52 +313,38 @@ export function SnippetManagerTool() {
313313 const selectedIdRef = useRef ( selectedId ) ;
314314 selectedIdRef . current = selectedId ;
315315
316- const debouncedSaveCode = useMemo (
317- ( ) =>
318- debounce ( ( code : string ) => {
319- const id = selectedIdRef . current ;
320- if ( ! id ) return ;
321- useSnippetManagerStore . getState ( ) . updateSnippet ( id , { code } ) ;
322- const u = userRef . current ;
323- if ( u ) {
324- void patchCodeSnippetApi ( id , { code } )
325- . then ( ( s ) =>
326- useSnippetManagerStore . getState ( ) . mergeSnippetFromRemote ( s )
327- )
328- . catch ( ( ) => toast . error ( t ( "toastSyncFailed" ) ) ) ;
329- }
330- } , 450 ) ,
331- [ t ]
332- ) ;
333-
334- const debouncedSetLangCode = useMemo (
335- ( ) => debounce ( ( code : string ) => setDebouncedCode ( code ) , 300 ) ,
336- [ ]
337- ) ;
316+ const debouncedSaveCode = useDebouncedCallback ( ( code : string ) => {
317+ const id = selectedIdRef . current ;
318+ if ( ! id ) return ;
319+ useSnippetManagerStore . getState ( ) . updateSnippet ( id , { code } ) ;
320+ const u = userRef . current ;
321+ if ( u ) {
322+ void patchCodeSnippetApi ( id , { code } )
323+ . then ( ( s ) =>
324+ useSnippetManagerStore . getState ( ) . mergeSnippetFromRemote ( s )
325+ )
326+ . catch ( ( ) => toast . error ( t ( "toastSyncFailed" ) ) ) ;
327+ }
328+ } , 450 ) ;
338329
339- const debouncedPersistTitleLang = useMemo (
340- ( ) =>
341- debounce ( ( title : string , language : string , id : string ) => {
342- useSnippetManagerStore . getState ( ) . updateSnippet ( id , { title, language } ) ;
343- const u = userRef . current ;
344- if ( u ) {
345- void patchCodeSnippetApi ( id , { title, language } )
346- . then ( ( s ) =>
347- useSnippetManagerStore . getState ( ) . mergeSnippetFromRemote ( s )
348- )
349- . catch ( ( ) => toast . error ( t ( "toastSyncFailed" ) ) ) ;
350- }
351- } , 400 ) ,
352- [ t ]
330+ const debouncedSetLangCode = useDebouncedCallback (
331+ ( code : string ) => setDebouncedCode ( code ) ,
332+ 300
353333 ) ;
354334
355- useEffect (
356- ( ) => ( ) => {
357- debouncedSaveCode . cancel ( ) ;
358- debouncedSetLangCode . cancel ( ) ;
359- debouncedPersistTitleLang . cancel ( ) ;
335+ const debouncedPersistTitleLang = useDebouncedCallback (
336+ ( title : string , language : string , id : string ) => {
337+ useSnippetManagerStore . getState ( ) . updateSnippet ( id , { title, language } ) ;
338+ const u = userRef . current ;
339+ if ( u ) {
340+ void patchCodeSnippetApi ( id , { title, language } )
341+ . then ( ( s ) =>
342+ useSnippetManagerStore . getState ( ) . mergeSnippetFromRemote ( s )
343+ )
344+ . catch ( ( ) => toast . error ( t ( "toastSyncFailed" ) ) ) ;
345+ }
360346 } ,
361- [ debouncedSaveCode , debouncedSetLangCode , debouncedPersistTitleLang ]
347+ 400
362348 ) ;
363349
364350 const [ storeHydrated , setStoreHydrated ] = useState ( ( ) => {
0 commit comments