Implement useThrottle Custom Hook In React (Interview)

In frontend Interviews and development, react performance optimization is one of the important ask when dealing with user input events like typing, scrolling, etc. In this case Throttling can help to improve the performance 

In this blog post, we will explore how to implement a custom useThrottle hook in React, which can be handy in scenarios where you want to control the rate of execution of a function.

Implementation of useThrottle custom hook in react

Before jumping to the implementation let's understand the concept of throttling in react, in simple words

Throttling is a technique used to limit the number of times a function is called over a specified time interval. Throttling is generally used in the cases where many events occurs on user interaction and causes effects (like API calls or calculations) every time, in these cases throttling can be used to limit the effects.

Let's implement useThrottle custom hook:

import React, { useState, useEffect } from 'react';

const useThrottle = (value, delay) => {
  const [throttledValue, setThrottledValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setThrottledValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return throttledValue;
};

export default useThrottle;

Let's understand the implementation:

• value input: The value that we want to throttle.
• delay input: The time interval in milliseconds for which the value should be throttled (waiting time).
• We set up a setTimeout inside the useEffect hook to update the throttled value after the specified delay.
• The return statement inside useEffect clears the timer to avoid memory leaks.

Use useThrottle custom hook

Now, let's see how we can use the useThrottle custom hook implementation in a component:

import React, { useState } from 'react';
import useThrottle from './useThrottle';

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const throttledSearchTerm = useThrottle(searchTerm, 500);

  const handleSearch = (e) => {
    setSearchTerm(e.target.value);
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />
      <p>Throttled Search Term: {throttledSearchTerm}</p>
    </div>
  );
};

export default App;

In the example above,

we are creating a simple search input field where the search term is throttled (Need to wait till that time) to update every 500 milliseconds. This can be useful in scenarios like a product search functionality in e-commerce application where you want to reduce the number of API calls to fetch the product details as soon as you hit a word in the input box.

Conclusion

As throttling is one of the most common techniques to enhance the performance by limiting the number of calls to the server, this is commonly asked react interview question for which you need to be ready.

Now with the understanding of useThrottle() custom hook implementation, you can easily use this common functionality through out the application rather than creating separate throttle functions for one or more components.

Keep Coding :)

Learn Next 🚀

1. 20 Most Asked Custom Hooks in React for Interviews
2. Implement useDebounce custom hook in React
3. Best Resources to prepare for React Interviews