Debouncing for Improved Performance Using the useDebounced Hook

Introduction to the useDebounced hook

In the internal implementation of the useDebounced custom hook the React useState, useRef , useMemo and useEffect hooks are utilized. A useDebounced hook is useful for scenarios where we want to delay the execution of a function until a certain period of time has passed without any further calls.

In Debouncing the search lesson, we ran into a very interesting implementation: we debounced the user keystroke so that we didn't invoke a heavy operation (such as search) too frequently.

Implementing the useDebounced hook

A pattern that emerged is that for a given state, whenever we change it via dispatch, we want to wait for a period of time before we are assured that it's the right time to act upon it. So ...