From 01874cb2db21d3e080a3b41bec5e40b6b3ae9ee0 Mon Sep 17 00:00:00 2001 From: Henit Chobisa Date: Fri, 8 Dec 2023 16:44:42 +0530 Subject: [PATCH] fix: added useCallback for controlling debounce function triggering on every rerendeer Added a useCallback function, which helps keeping only one version of the debounce function, what happens is that when we type in the editor, the rerenders produces multiple debounce function, which all triggers together after the specifier amount of time, making many request to backend, consiquently failing the debounce. Now useCallback will give only one function even if the rerenders are happening which fixes the issue --- .../[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx index 3d416c507..61a291634 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx @@ -328,6 +328,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => { description_html: "", }); + // ADDING updatePage TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS const debouncedFormSave = useCallback( debounce(async () => { handleSubmit(updatePage)().finally(() => setIsSubmitting("submitted"));