Decreasing server load by using debouncing/throttle technique in reactjs

Debouncing and Throttling in React.js Debouncing and throttling are techniques used to optimize performance by controlling the frequency of function execution in response to frequent events (e.g., typing, scrolling, resizing). 1. What is Debouncing? Debouncing delays the execution of a function until after a certain amount of time has passed since the last time it was invoked. Use Case Example: Search input field: Avoid triggering an API call on every keystroke. Debouncing Example in React import React, { useState, useEffect } from 'react'; const DebouncedSearch = () => { const [searchTerm, setSearchTerm] = useState(''); const [debouncedValue, setDebouncedValue] = useState(''); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(searchTerm); }, 500); // Delay of 500ms return () => { clearTimeout(handler); // Cleanup on input change }; }, [searchTerm]); useEffect(() => { if (debouncedValue) { console.log('API Call with:', debouncedValue); // Make API call here } }, [debouncedValue]); return ( setSearchTerm(e.target.value)} /> ); }; export default DebouncedSearch; 2. What is Throttling? Throttling ensures that a function is executed at most once in a specified time interval, regardless of how many times it is triggered during that interval. Use Case Example: Scroll event: Limit the frequency of a function triggered during a scroll event to improve performance. Throttling Example in React import React, { useEffect } from 'react'; const ThrottledScroll = () => { useEffect(() => { const handleScroll = throttle(() => { console.log('Scroll event fired'); }, 1000); // Execute at most once every 1000ms window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); return Scroll the page; }; // Throttle function implementation const throttle = (func, limit) => { let lastFunc; let lastRan; return function (...args) { const context = this; if (!lastRan) { func.apply(context, args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(() => { if (Date.now() - lastRan >= limit) { func.apply(context, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; }; export default ThrottledScroll; 3. Using Libraries (Optional) Instead of implementing custom debounce/throttle, you can use popular libraries like: Lodash Install: npm install lodash Usage: import { debounce, throttle } from 'lodash'; // Debounce Example const debouncedFunc = debounce(() => console.log('Debounced!'), 500); // Throttle Example const throttledFunc = throttle(() => console.log('Throttled!'), 1000); React-use Install: npm install react-use Usage: import { useDebounce, useThrottle } from 'react-use'; const Demo = () => { const [value, setValue] = useState(''); const debouncedValue = useDebounce(value, 500); const throttledValue = useThrottle(value, 1000); useEffect(() => { console.log('Debounced:', debouncedValue); console.log('Throttled:', throttledValue); }, [debouncedValue, throttledValue]); return ( setValue(e.target.value)} placeholder="Type something..." /> ); }; export default Demo; Key Differences Feature Debouncing Throttling Execution Executes once after the user stops firing events for a specified time. Executes at regular intervals during the event. Use Cases Search input, resizing, form validation. Scroll events, button clicks, API polling. Performance Reduces the number of function calls. Limits execution to once per interval. When to Use Debouncing: When you want to delay execution until the user stops an action (e.g., waiting for typing to finish). Throttling: When you want to control the rate of execution (e.g., ensuring smooth scrolling performance). Both techniques can significantly improve performance and user experience when used appropriately!

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

const DebouncedSearch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedValue, setDebouncedValue] = useState('');

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(searchTerm);
    }, 500); // Delay of 500ms

    return () => {
      clearTimeout(handler); // Cleanup on input change
    };
  }, [searchTerm]);

  useEffect(() => {
    if (debouncedValue) {
      console.log('API Call with:', debouncedValue);
      // Make API call here
    }
  }, [debouncedValue]);

  return (
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
};

export default DebouncedSearch;

import React, { useEffect } from 'react';

const ThrottledScroll = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scroll event fired');
    }, 1000); // Execute at most once every 1000ms

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

  return <div style={{ height: '200vh' }}>Scroll the pagediv>;
};

// Throttle function implementation
const throttle = (func, limit) => {
  let lastFunc;
  let lastRan;
  return function (...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
};

export default ThrottledScroll;

npm install lodash

import { debounce, throttle } from 'lodash';

// Debounce Example
const debouncedFunc = debounce(() => console.log('Debounced!'), 500);

// Throttle Example
const throttledFunc = throttle(() => console.log('Throttled!'), 1000);

npm install react-use

import { useDebounce, useThrottle } from 'react-use';

const Demo = () => {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
  const throttledValue = useThrottle(value, 1000);

  useEffect(() => {
    console.log('Debounced:', debouncedValue);
    console.log('Throttled:', throttledValue);
  }, [debouncedValue, throttledValue]);

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type something..."
    />
  );
};

export default Demo;

Related Posts

TS1103: 'for await' loops are only allowed within async...

Jan 15, 2025

Can I build & market a SaaS app to $100 in 1 month?

Jan 15, 2025

Don't copy/paste code you don't understand

Jan 15, 2025