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

What is React Js?

Slicing Redux in ReactJS

Coding a countdown timer with RxJS

Cloning of Fab-India  (Using HTML, CSS & JavaScript)

React’s State Reducer Pattern

DATA STRUCTURE IN PYTHON

How to apply changes to WSO2 API Manager React Portals on the go?

React Native Navigation: Too Easy? How?

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

React Hooks With Context

Core React concepts

A React Christmas

What is React? Why is React better than vanilla JavaScript?