Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix Featured Product Search not working for large stores #5156

Merged
merged 2 commits into from
Dec 2, 2021
Merged

Fix Featured Product Search not working for large stores #5156

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a29508
Remove the dependency from the getProducts useEffect
alexflorisca Nov 16, 2021
0b066a6
using ref instead of empty dependency array for useEffect
alexflorisca Nov 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/js/hocs/with-searched-products.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const withSearchedProducts = (
setIsLoading( false );
} )
.catch( setErrorState );
}, [ selected ] );
}, [] );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an anti pattern that we fought a bit to get rid off and refactor away from, because it causes hard to debug bugs.
If you feel like selected is not going to change much here, I'd suggest you have it a ref then?

const selectedRef = useRef( selected );

selectedRef.current;

This should achieve the same goal, and would not cause rerenders.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing that out @senadir, I'd be curious to know more about the types of bugs this causes! I've changed the implementation to use a ref as you suggested.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! This causes out of sync bugs, things running when not needed, and generally hard to find bugs, examples:
#3314
#3285


const [ debouncedSearch ] = useDebouncedCallback(
( search: string ) => {
Expand Down