On clicking the heart, there should be a shadow to give it the feeling that it's been pressed.

Uncertain what happened, but counter just went from 19k clicks to 22k clicks. This has happened previously, but it went up by 1k so I was uncertain if I just forgot.

Not sure how to recreate the error, but I'll take a look into the code later.

Issue

The canvas element is re-drawing too many times when total count is updated. This means that some components are being re-rendered multiple times.

Info

Expected behavior: When the heart is clicked, the page should re-draw the pixels on the Canvas just once.
Current behavior: When the heart is clicked, the Canvas is re-drawn 4 times.

What's happening:

• When the heart is clicked (total count increased by 1), the page is redrawn
• Then after not-clicking consecutively for some time, a debounce fires and updates the global counter on Firestore. The page is redrawn twice (hard to see on the Gif, but it flashes really quickly)
• Then the page is re-rendered and re-drawn again. The useEffect for the debounce is called once more again

Fix Expectations:

• Only when the total count is updated, then the canvas is re-drawn
• Changing the theme, and refreshing the data (and seeing no changes), should not result in a re-drawn canvas