From 46a9b58582f5d49f337f46dedc65f1d56a40bf28 Mon Sep 17 00:00:00 2001 From: Mustaque Ahmed Date: Thu, 16 Dec 2021 01:26:02 +0530 Subject: [PATCH 1/2] Wrap `useDebounce` call inside `useCallback` This is done in order to avoid function call getting cancelled on multiple refresh --- .../server-side-render/src/server-side-render.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js index deb7d025b647e..ce1df6fc045e5 100644 --- a/packages/server-side-render/src/server-side-render.js +++ b/packages/server-side-render/src/server-side-render.js @@ -7,7 +7,13 @@ import { isEqual } from 'lodash'; * WordPress dependencies */ import { useDebounce, usePrevious } from '@wordpress/compose'; -import { RawHTML, useEffect, useRef, useState } from '@wordpress/element'; +import { + RawHTML, + useEffect, + useRef, + useState, + useCallback, +} from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; @@ -81,7 +87,7 @@ export default function ServerSideRender( props ) { const prevProps = usePrevious( props ); const [ isLoading, setIsLoading ] = useState( false ); - function fetchData() { + const fetchData = useCallback( () => { if ( ! isMountedRef.current ) { return; } @@ -140,7 +146,7 @@ export default function ServerSideRender( props ) { } ) ); return fetchRequest; - } + }, [ isMountedRef, prevProps ] ); const debouncedFetchData = useDebounce( fetchData, 500 ); From 92d1c06c3c6ad665a22042d0f88fedcf232cc415 Mon Sep 17 00:00:00 2001 From: Mustque Ahmed Date: Sun, 7 Aug 2022 20:24:27 +0530 Subject: [PATCH 2/2] address review comments fix `useCallback` dependency array --- packages/server-side-render/src/server-side-render.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js index ce1df6fc045e5..d22b944e2bc61 100644 --- a/packages/server-side-render/src/server-side-render.js +++ b/packages/server-side-render/src/server-side-render.js @@ -85,7 +85,11 @@ export default function ServerSideRender( props ) { const fetchRequestRef = useRef(); const [ response, setResponse ] = useState( null ); const prevProps = usePrevious( props ); + const preAttributes = usePrevious( attributes ); + const prevUrlQueryArgs = usePrevious( urlQueryArgs ); const [ isLoading, setIsLoading ] = useState( false ); + const isAttributesChanged = isEqual( attributes, preAttributes ); + const isUrlQueryArgsChanged = isEqual( urlQueryArgs, prevUrlQueryArgs ); const fetchData = useCallback( () => { if ( ! isMountedRef.current ) { @@ -146,7 +150,7 @@ export default function ServerSideRender( props ) { } ) ); return fetchRequest; - }, [ isMountedRef, prevProps ] ); + }, [ httpMethod, isAttributesChanged, isUrlQueryArgsChanged ] ); const debouncedFetchData = useDebounce( fetchData, 500 );