Custom Hooks — Intermediate React challenge.
Build a generic leading-edge useThrottle hook, then wire it up to a rate-limited Like button — clicks fire instantly the first time, then get silently ignored until a cooldown passes, split across a hook file and a component file.
Requirements
- useThrottle(callback, delay) fires callback immediately on the first call.
- Any calls made during the cooldown window are silently dropped, never queued or delayed.
- Once the cooldown passes, the next call fires immediately and restarts the cooldown.
- useThrottle always invokes the latest version of callback, never a stale closure.
- LikeButton increments likeCount and toggles isLiked only on calls that actually fire through the throttle.
- A separate, purely visual isCoolingDown state drives cursor styling during the throttle window.
Signature
function useThrottle<T extends (...args: any[]) => void>(callback: T, delay: number): T
function LikeButton(): JSX.Element
Example
const throttledLike = useThrottle(handleLike, 1000);
// click x4 rapidly -> handleLike fires only once
// wait 1000ms, click again -> handleLike fires a second time
Constraints
- This is a LEADING-edge throttle only — no trailing-edge fire at the end of the cooldown.
- Do not use lodash/underscore's throttle — implement it with useRef + useCallback.
- The visual cooldown state and the throttle's internal cooldown timing must both be 1000ms, but are separate concerns implemented independently.