# useDebounce vs useThrottle

> Create two custom hooks, useDebounce and useThrottle, to manage the frequency of function executions.

- Difficulty: intermediate
- Tags: customHook, useEffect, useState, useRef
- Estimated time: 30 minutes
- Tests: 3
- Requires subscription: no

## Overview

Create two custom hooks, useDebounce and useThrottle, to manage the frequency of function executions.


## Requirements

- Implement two custom hooks in `hooks.ts`
  - `useDebounce(value, delay)`
    - Returns the updated value only after the specified `delay` has passed without further changes.
  - `useThrottle(value, limit)`
    - Returns the updated value at most once every `limit` milliseconds, regardless of how many times the original value changes during that period.
    - Trailing-only: the value is never emitted immediately on the first change (leading: false); instead, the latest value seen during the window is emitted once `limit` ms have elapsed (trailing: true).
- Both hooks should correctly handle rapid state changes without causing unnecessary re-renders.


## Notes

- Only `hooks.ts` needs to be implemented. `App.tsx` is already complete and should not be modified for functionality.
- The exported `DELAY` constant from `App.tsx` can be changed to observe throttle/debounce behavior.


## Tests

01. increments debounced and normal counters correctly
02. increments throttled and normal counters correctly
03. resets debounced and throttled counters instantly on Clear