How to Throttle Event Handler in React: Simple Guide

To throttle an event handler in React, wrap the handler function with a throttle utility like lodash's _.throttle to limit how often it runs. This prevents the handler from firing too frequently during rapid events like scrolling or resizing.

Syntax

Use a throttle function to wrap your event handler. It takes two main parts:

• handler: The function you want to limit.
• delay: Time in milliseconds to wait before allowing the next call.

Example syntax:

const throttledHandler = throttle(handler, delay);

javascript

import { throttle } from 'lodash';

function handler(event) {
  console.log('Event fired', event);
}

const throttledHandler = throttle(handler, 1000);

Example

This example shows a React component that logs the window width when resizing, but only once every 1 second thanks to throttling.

javascript

import React, { useEffect } from 'react';
import { throttle } from 'lodash';

export default function ThrottleExample() {
  useEffect(() => {
    const handleResize = throttle(() => {
      console.log('Window width:', window.innerWidth);
    }, 1000);

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      handleResize.cancel(); // cancel pending calls
    };
  }, []);

  return <div>Resize the window and check the console.</div>;
}

Output

Resize the window and check the console.

// Console logs window width at most once per second while resizing

Common Pitfalls

Common mistakes when throttling event handlers in React include:

• Not memoizing the throttled function, causing it to be recreated on every render and losing throttle effect.
• Forgetting to clean up event listeners and cancel throttled calls on component unmount.
• Using setTimeout inside the handler instead of proper throttle utilities.

javascript

import React, { useEffect } from 'react';
import { throttle } from 'lodash';

// Wrong: throttle recreated on every render
function Wrong() {
  useEffect(() => {
    const throttled = throttle(() => console.log('Resize'), 1000);
    window.addEventListener('resize', throttled);
    return () => window.removeEventListener('resize', throttled);
  }); // no dependency array
  return <div>Wrong example</div>;
}

// Right: throttle memoized with useEffect and cleanup
function Right() {
  useEffect(() => {
    const throttled = throttle(() => console.log('Resize'), 1000);
    window.addEventListener('resize', throttled);
    return () => {
      window.removeEventListener('resize', throttled);
      throttled.cancel();
    };
  }, []);
  return <div>Right example</div>;
}

Quick Reference

Tips for throttling event handlers in React:

• Use lodash.throttle or similar libraries for reliable throttling.
• Wrap the throttled function inside useEffect with an empty dependency array to avoid recreating it.
• Always clean up event listeners and cancel throttled calls on unmount.
• Throttle is useful for scroll, resize, mousemove, and input events to improve performance.

Key Takeaways

Throttle event handlers by wrapping them with a throttle function like lodash's _.throttle.

Memoize the throttled handler inside useEffect to prevent recreating it on every render.

Always remove event listeners and cancel throttled calls when the component unmounts.

Throttling improves performance by limiting how often heavy event handlers run.

Use throttling for events that fire rapidly, such as scroll and resize.