Create a custom debounce Hook in React
Tags: react, webdev
Published: 2022-11-23 18:40:46

**Written by [Ishan Manandhar](https://blog.logrocket.com/author/ishan-manandhar/)✏️**

[React v16.8](https://reactjs.org/docs/hooks-intro.html) introduced React Hooks and a new wave of possibilities for writing functional components. With React Hooks, we can create reusable logic separately, which helps us [write better and more manageable code](https://blog.logrocket.com/react-hooks-context-redux-state-management/). 

In this article, we will write a custom debounce Hook in our React app that defers some number of seconds to process our passed value. We will create a simple React app to search for [Rick and Morty](https://rickandmortyapi.com/) characters and optimize our application with a custom debounce React Hook. 

_Jump ahead:_

*   [What is debouncing?](#what-debounce)
*   [Creating our React app](#creating-react-app)
*   [Writing our custom debounce React Hook](#writing-custom-debounce-react-hook)
*   [Improving the debounce Hook in React](#improving-debounce-hook-react)

## What is debouncing? <a name="what-debounce">

Debouncing is an optimizing technique for the result of any expensive function. These functions can take a lot of execution effort, so we will create this effect by simulating a delayed execution for a period. Using debounce can improve our React application by chunking the executed actions, adding a delayed response, and executing the last call. 

There are a lot of built-in Hooks in React, including use, `useState`, `useEffect`, `useMemo`, `useContext`, to name a few. We can even combine multiple Hooks and create [custom Hooks for our React application](https://blog.logrocket.com/create-your-own-custom-react-hooks/). Custom React Hooks are functions that start with `use` keywords followed by the name of the Hook we are making. 

Before creating a debounce Hook, we need to understand the following:

*   Hooks are not called inside a loop, conditions, or nested functions
*   Multiple Hooks can be used to build new ones
*   Hooks can only be called from React functions
*   Hooks are made for functional components.
*   Name Hooks starting with the word "use"

We are building an application that will simulate excessive API calls to the backend sent by pressing keystrokes. To reduce the excessive calls, we will introduce the [`useDebounce React Hook`](https://blog.logrocket.com/how-and-when-to-debounce-or-throttle-in-react/). This Hook will consume the value and the timer we passed. 

We will only execute the most recent user action if the action is continuously invoked. Using the debounce React Hook will reduce the unnecessary API calls to our server and optimize our application for better performance. 

Let's get started!

## Creating our React app <a name="creating-react-app">

For this application, we will be using a simple React, Vite.js, and JavaScript application. We will add a few sprinkles of styling with [Chakra UI](https://blog.logrocket.com/advanced-techniques-chakra-ui/). 

Let's create a Vite.js application with this command:

```javascript
npm create vite@latest react-useDebounce
cd react-useDebounce
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

After all the packages have been added, we can start creating the `components` folder. We will begin with a simple `TextField` that we will import from Chakra:

```javascript
export default function Inputfield({onChange, value}) {
 return (
   <div>
     <Input onChange={onChange} value={value} placeholder='Search your character' size='md' />
   </div>
 )
}
```

This component is a simple input that takes in an `onChange` function and `value` as a prop. We will use a response from our API to list all the characters we find. 

We need to call our endpoint and receive the response from it, so we will create a `Utils` folder and get data using the browser native [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API:

```javascript
export async function getCharacter(value) {
 const data = await fetch(
   `https://rickandmortyapi.com/api/character/?name=${value}`
 )
 const response = await data.json()
 if (response === undefined || response.error) {
   throw new Error(`HTTP error! status: ${response.error}`);
 }
 return response
}
```

Here, we created a function that makes an API call to the server and parses the data to JSON. We also added a basic error handling in case we receive an `error` or `undefined` from the server.

## Writing our custom debounce React Hook <a name="writing-custom-debounce-react-hook">

Now, we can go ahead and create a `Hooks` folder where we will add the Hooks we create for our application. You can brush up on the best practices for using React Hooks [here](https://blog.logrocket.com/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70/). 

Inside of `useDebounce.jsx`, we will write our `useDebounce` function:

```javascript
import { useState, useEffect } from 'react'

export const useDebounce = (value, milliSeconds) => {
 const [debouncedValue, setDebouncedValue] = useState(value);

 useEffect(() => {
   const handler = setTimeout(() => {
     setDebouncedValue(value);
   }, milliSeconds);

   return () => {
     clearTimeout(handler);
   };
 }, [value, milliSeconds]);

 return debouncedValue;
};
```

You can see nothing much going on in this function, but don't worry, we will fix this as we go along. This is nothing new if you are familiar with the `setTimeOut` and `clearTimeOut` functions. 

The function takes value and milliseconds as a second parameter, extending its execution with a specific time interval. We also cleared the time with a `cleanup return` call and added the `value` and `milliSeconds` as a `dependency` array. Here's some more information about the functions:

*   `useState()`: This Hook helps us store the needed values
*   `useEffect()`: Used to update the debounce value with a cleanup function
*   `setTimeOut()`: Creates timeout delays
*   `clearTimeOut`: Clean up, dismounting the component relating to user input

We can implement our debounce React Hook inside our application:

```javascript
import { useState, useEffect } from 'react'
import { ChakraProvider, Heading, Text, Box } from '@chakra-ui/react'
import Inputfield from './components/input-field'
import { useDebounce } from './hooks/useDebounce'
import { getCharacter } from './utils/getCharacter'
import './App.css'

function App() {
 const [query, setQuery] = useState('')
 const [listing, setListing] = useState('')
 const [loading, setLoading] = useState(false)

 const searchQuery = useDebounce(query, 2000)

 useEffect(() => {
   setListing('')
   if (searchQuery || query.length < 0) searchCharacter();
   async function searchCharacter() {
     setListing('')
     setLoading(true)
     const data = await getCharacter(searchQuery)
     setListing(data.results)
     setLoading(false)
   }
 }, [searchQuery])

 return (
   <div className="App">
     <ChakraProvider>
       <Heading mb={4}>Search Rick and Morty Character</Heading>
       <Text fontSize='md' textAlign="left" mb={10}>
         With a debouce hook implemented
       </Text>
       <Inputfield mb={10} onChange={(event) => setQuery(event.target.value)} value={query} />
       {loading && <Text mb={10} mt={10} textAlign="left">Loading...</Text>}
       {listing && <Box mt={10} display={'block'}>{listing.map(character => (
         <Box key={character.id} mb={10}>
           <img src={character.image} alt={character.name} />
           {character.name}
         </Box>
       ))}</Box>}
     </ChakraProvider>
   </div>
 )
}

export default App
```

So far, we've done the basic implementation and used `useState` to store state for our `searchQuery` word. 

After finding the result, we'll set our `listing` state with the data. Because this is an asynchronous action, we added `loading` to continue tracking the `data loading` state. 

Although this is a simple implementation of a debounce Hook, we will improve and refactor our code. Let's get into improving our code.

## Improving our debounce Hook in React <a name="improving-debounce-hook-react">

To improve the debounce Hook in React, we will use [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController), a WebAPI natively built-in with all modern browsers. This API helps us stop any ongoing Web requests. 

To start using this controller, instantiate it with the following: `const controller = new AbortController();` With the controller, we can access two properties:

*   `abort()` : When executed, this cancels the ongoing request
*   `Signal`: This maintains the connection between the `controller` and requests to cancel

We can now add further tweaks to our `debounce` Hook. When we do not receive a `milliSeconds` value, we'll provide an optional value:

```javascript
const timer = setTimeout(() => setDebouncedValue(value), milliSeconds || 1000)
```

Inside the `getCharacter` function, we will pass in the `signal` property of the `controller`. Now, we will make some significant changes to our main file. 

Let's go through the changes that were introduced:

```javascript
import { useState, useEffect, useRef } from 'react'
import { ChakraProvider, Heading, Text, Box, Button, SimpleGrid } from '@chakra-ui/react'
import Inputfield from './components/input-field'
import { useDebounce } from './hooks/useDebounce'
import { getCharacter } from './utils/getCharacter'
import './App.css'

function App() {
 const [query, setQuery] = useState('')
 const [listing, setListing] = useState('')
 const [loading, setLoading] = useState(false)
 const controllerRef = useRef()

 const searchQuery = useDebounce(query, 2000)
 const controller = new AbortController();
 controllerRef.current = controller;
  const searchCharacter = async () => {
   setListing('')
   setLoading(true)
   const data = await getCharacter(searchQuery, controllerRef.current?.signal)
   controllerRef.current = null;
   setListing(data.results)
   setLoading(false)
 }

 useEffect(() => {
   if (searchQuery || query.trim().length < 0) searchCharacter()
   return cancelSearch()
 }, [searchQuery])

 const cancelSearch = () => {
   controllerRef.current.abort();
 }

 return (
   <div className="App">
     <ChakraProvider>
       <Heading mb={4}>Search Rick and Morty  Character</Heading>
       <Text fontSize='md' textAlign="left" mb={10}>
         With a debounce hook implemented
       </Text>

       <SimpleGrid columns={1} spacing={10}>
         <Box>
           <Inputfield mb={10} onChange={(event) => setQuery(event.target.value)} value={query} />
         </Box>
       </SimpleGrid>

       {loading && <Text mb={10} mt={10} textAlign="left">Loading...</Text>}
       {listing && <Box mt={10} display={'block'}>{listing.map(character => (
         <Box key={character.id} mb={10}>
           <img src={character.image} alt={character.name} />
           {character.name}
         </Box>
       ))}</Box>}
       {!listing && !loading && <Box mt={10} display={'block'} color={'#c8c8c8'}>You have started your search</Box>}
     </ChakraProvider>
   </div>
 )
}

export default App
```

Here, we introduced an additional Hook into our app. We used the `controller` constructor to create a new instance of `AbortSignal` and assigned the `controller` to `useRef`. The `useRef` helped us get the elements from the DOM to keep an eye on the state changes. 

During our API call, we passed in the current `signal option` with `controllerRef.current.signal`. We added a `cancel` controller to call in the [cleanup function](https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/) when the `searchQuery` values changed:

*   `Aborted`: A `Boolean` value that indicates the signal has been aborted, it's initially `false`, and when fired, it is originally `null`
*   `abortController.abort()`: This helps us stop the `fetch` request

We can also make multiple calls to the server and abort the request as needed. This comes in handy when dealing with network traffic and optimization techniques.

## Conclusion

In this article, we successfully created a debounce React Hook to limit unnecessary calls and processing to the server in our React application. Using this technique helps improve React applications. 

We can use this debounce optimization technique for expensive actions like resizing events, dragging events, keystroke listeners, and on scroll events. This can help us run applications for known performance benefits. To find the complete working code, check out the [GitHub repository](https://github.com/ishan-is-me/react-useDebounce/tree/revised-code). 

Happy coding!

---
##Cut through the noise of traditional React error reporting with LogRocket

[LogRocket](https://lp.logrocket.com/blg/react-signup-issue-free) is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

[![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://lp.logrocket.com/blg/signup)

[LogRocket](https://lp.logrocket.com/blg/react-signup-issue-free) automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.

Focus on the React bugs that matter — [try LogRocket today](https://lp.logrocket.com/blg/react-signup-issue-free).