Adding a Debounce Mechanism: This prevents a bug in the game where a user can exploit the game mechanics by rapidly double-clicking on a single upside-down card. It was causing the card and its matching pair to flip over automatically, resulting in an unintended match.
We could also use 'useCallback' hook here. But since it was not included in the course, I made changes in the condition itself.
Nevertheless, Here's the code with the useCallBack hook:
Adding a Debounce Mechanism: This prevents a bug in the game where a user can exploit the game mechanics by rapidly double-clicking on a single upside-down card. It was causing the card and its matching pair to flip over automatically, resulting in an unintended match. We could also use 'useCallback' hook here. But since it was not included in the course, I made changes in the condition itself.
Nevertheless, Here's the code with the useCallBack hook:
const handleClick = useCallback((card) => { if (!disabled && card !== pickOne && !card.matched) { pickOne ? setPickTwo(card) : setPickOne(card); } }, [disabled, pickOne]);