Throttling
- Throttling is similar to debouncing in that it limits the rate at which a function is executed. However, instead of waiting for a pause before executing the function, throttling ensures the function is executed at a regular interval, regardless of how many times it’s triggered.
- Picture it like this: You’re scrolling through a webpage, and there’s a function that checks your scroll position and does something (like updating an animation or loading more content). With throttling, even if you scroll like crazy, the function will only execute every, say, 100 milliseconds.
- This prevents performance issues that might arise from excessively frequent function calls, especially in scenarios like scrolling or mouse movement tracking.
Example: Below is an example of debounce and throttle input changes.
- We use the
useState
hook to manage the input value (inputValue
) and the debounced (debouncedValue
) and throttled (throttledValue
) versions of the input value. - We use the
useEffect
hook to perform debouncing and throttling. Inside the effect, we set a timer to update the debounced or throttled value after a certain delay when the input value changes. - The debounce time is set to 500 milliseconds, and the throttle time is set to 1000 milliseconds in this example.
- We have an input element controlled by the
inputValue
state, and itsonChange
event triggers thehandleChange
function to update the input value state. - Below the input, we display the debounced and throttled values, which get updated after the specified delay when the input value changes.
Javascript
import React, { useState, useEffect } from 'react' ; const InputComponent = () => { const [inputValue, setInputValue] = useState( '' ); const [debouncedValue, setDebouncedValue] = useState( '' ); const [throttledValue, setThrottledValue] = useState( '' ); useEffect(() => { console.log( 'Input value changed:' , inputValue); const debounceTimer = setTimeout(() => { console.log(`Debounce timer expired. Updating debounced value:`, inputValue); setDebouncedValue(inputValue); }, 500); // Debounce time: 500 milliseconds return () => { console.log( 'Clearing debounce timer' ); clearTimeout(debounceTimer); }; }, [inputValue]); useEffect(() => { console.log( 'Input value changed:' , inputValue); const throttleTimer = setTimeout(() => { console.log(`Throttle timer expired. Updating throttled value:`, inputValue); setThrottledValue(inputValue); }, 1000); // Throttle time: 1000 milliseconds return () => { console.log( 'Clearing throttle timer' ); clearTimeout(throttleTimer); }; }, [inputValue]); const handleChange = (event) => { console.log( 'Input value changing:' , event.target.value); setInputValue(event.target.value); }; return ( <div> <input type= "text" value={inputValue} onChange={handleChange} placeholder= "Type something..." /> <div> <p>Debounced value: {debouncedValue}</p> <p>Throttled value: {throttledValue}</p> </div> </div> ); }; export default InputComponent; |
Output:
How to debounce or throttle input changes in React?
Debouncing and throttling are techniques used to limit the frequency of certain actions, particularly useful for handling input changes like those from user interactions.