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 cases where many events occur on user interaction and cause 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:

Creating the useThrottle() Hook in React

In React, a throttling hook can be useful to limit the rate at which a function is called. Here's how you can create a useThrottle() custom hook

import { useEffect, useRef, useState } from "react";

function useThrottle(value, delay = 300) {
  const [throttledValue, setThrottledValue] = useState(value);
  const isThrottled = useRef(false);

  useEffect(() => {
    if (isThrottled.current) return;

    isThrottled.current = true;
    setThrottledValue(value);

    setTimeout(() => {
      isThrottled.current = false;
    }, delay);
  }, [value, delay]);

  return throttledValue;
}

export default useThrottle;

Let's understand the implementation:

• useState stores the throttled value, this is the value that updates less frequently than the incoming one.
• useRef is used as a lock (isThrottled) because it can change without causing a re-render.
• useEffect runs every time the input value changes.
• Inside the effect, the hook first checks the ref lock to see if updates are currently blocked.
• If the lock is active, the effect exits early and ignores the change.
• If the lock is inactive, the hook updates the state with the new value and activates the lock.
• A timeout is started to control how long the lock stays active.
• After the delay finishes, the timeout releases the lock, allowing the next update.

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