This content originally appeared on DEV Community and was authored by Ola Abaza
Throttle
Limits a function to execute once every X ms.
Use Case: Limit frequency of rapievents.ts
Example Use: Scroll, resize, GPS tracking, button taps
Example: Scroll Event
import throttle from 'lodash/throttle';
const handleScroll = throttle((event) => {
console.log('Scrolling...', event.nativeEvent.contentOffset.y);
}, 1000); // Only once every 1 second
<ScrollView onScroll={handleScroll} scrollEventThrottle={16} />
🔁 Even if the scroll event fires 60 times per second, your handler only fires once every 1000 ms.
Debounce
Waits until a function hasn't been called for X ms.
Use Case: React to the final event after user stops
Example Use: Text search, validation, autocomplete, form
Example: Text Input
import debounce from 'lodash/debounce';
const handleChange = debounce((text) => {
console.log('Searching for:', text);
}, 500); // Only runs 500ms after user stops typing
<TextInput onChangeText={handleChange} />
⏳ The user types "h-e-l-l-o," and the function fires once, after the user pauses for 500 ms.
This content originally appeared on DEV Community and was authored by Ola Abaza
Ola Abaza | Sciencx (2025-08-05T19:27:10+00:00) 1 RN Thing a Day – Day 2: Throttling 🆚 Debouncing. Retrieved from https://www.scien.cx/2025/08/05/1-rn-thing-a-day-day-2-throttling-%f0%9f%86%9a-debouncing/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.