Home > Web Front-end > JS Tutorial > Debouncing vs Throttling in React

Debouncing vs Throttling in React

Mary-Kate Olsen
Release: 2024-12-08 09:59:16
Original
651 people have browsed it

Debouncing vs Throttling in React

Debouncing vs Throttling in React

Both debouncing and throttling are techniques to control the rate at which a function is executed, often used to improve performance when dealing with events like resizing, scrolling, or typing. Here's a simple explanation:


  1. Debouncing

Definition: Executes a function after a specified delay from the last time it was invoked. If the event keeps firing, the timer resets.

Use Case: When you want the function to run only once after the user stops triggering the event.
Example: API call after the user stops typing in a search box.

Code Example (Debouncing in React)

import React, { useState } from "react";

function debounce(func, delay) {
let timer;
return (...args) => {
clearTimeout(timer); // Clear the previous timer
timer = setTimeout(() => func(...args), delay); // Set a new timer
};
}

const App = () => {
const [value, setValue] = useState("");

const handleChange = debounce((e) => {
console.log("API Call for:", e.target.value);
}, 1000);

return (
type="text"
onChange={(e) => {
setValue(e.target.value);
handleChange(e);
}}
value={value}
placeholder="Type something..."
/>
);
};

export default App;

Behavior: The function (handleChange) executes only after the user stops typing for 1 second.


  1. Throttling

Definition: Executes a function at most once in a specified time interval, even if the event keeps firing.

Use Case: When you want the function to run at a consistent interval during frequent events.
Example: Logging the position of the page while scrolling.

Code Example (Throttling in React)

import React, { useEffect } from "react";

function throttle(func, limit) {
let lastFunc;
let lastTime;
return (...args) => {
const now = Date.now();
if (!lastTime || now - lastTime >= limit) {
func(...args);
lastTime = now;
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastTime >= limit) {
func(...args);
lastTime = Date.now();
}
}, limit - (now - lastTime));
}
};
}

const App = () => {
const handleScroll = throttle(() => {
console.log("Scroll event logged:", window.scrollY);
}, 1000);

useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);

return

Scroll down the page;
};

export default App;

Behavior: The handleScroll function logs the scroll position at most once every second, even if the scroll event fires continuously.


The above is the detailed content of Debouncing vs Throttling in React. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template