Lets build a Throttle hook in React

Whenever we search in a web app, we often don’t send the query to the backend immediately. The query will change with every keystroke, and by sending a request for every keypress, we will send a lot of unnecessary requests, that will eventually just be thrown away whenever they arrive to the frontend because the will be invalid with a new keystroke.

That is why we often implement the debouncing functionality. That will work as a temporarily cached, and if the user has not entered a key in a certain amount of time, the request is send. With that functionality, the user kan keep entering and deleting the query in the frontend, and eventually they will will stop pressing a key, and then the request is sent.

The downside is, that the user will not see any value in the meantime, and will have to wait for the final keystroke.

Throttling to the rescue!

Throttling is another technique that will detect if the user has entered a query, and will keep adding up the latest value until the time has passed, and then it will send a request to the backend. It will then keep sending a request to the backend in a specified interval, until the user has stopped entered any value. After that it will send a last request, if the last query was not send to the backend. With that functionality, we can keep requesting the backend eg. every 500 millisecond, and show data to the user for quicker user response.

Here is the hook

We use useRef to store the values, and then we detect if the prop ‘query’ has changed in the useEffect. If that is the case, we update nextVal ref with the new value. We also check if we have any new value, and if so we start another setTimeout again. With that, we can keep throttling until we don’t have any more values. Last we return the updated value.

This is a basic version of the throttle, and can be refactored so that we can customise how many milliseconds the throttling should last before executing. We could also make the input field more generic instead of just a query of type string. But for now, this does the job i need :-)

You can find the sourcecode here

--

--

--

Senior Frontend Developer at EazyProject A/S

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why I Spent 3 Hours Trying to Fix a React Re-render Issue

usHow we use custom hooks?

Using EJS as a Template Engine in your Express App.

First steps with AWS Amplify for an Angular app

Transferring data between Screens in React Native

React Native Optimisation: A Guide

Fivnex Starts Full Development on MEML, What Are They Doing?

Fixed Point in a Given Array in Javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kasper Due

Kasper Due

Senior Frontend Developer at EazyProject A/S

More from Medium

Quick Tips: creating simple accordion with React hooks

How to UseEffect In React

Hooked on React

Managing React Forms in an easy and efficient way

react hook form