Event Pooling, Debounce, and Throttle in React: Optimizing Event Handling

Event Pooling

Event Pooling in React is an optimization technique used to improve performance when handling events. Instead of creating a new SyntheticEvent object every time an event is triggered, React reuses the same SyntheticEvent object, pooling it for performance benefits.

After the event handler is executed, React clears the SyntheticEvent object’s properties, making it available for reuse in subsequent events. This prevents the event object from persisting beyond the event handler’s execution.

If you need to use the event object asynchronously (e.g., in a callback or setTimeout), you must call event.persist() to remove it from the pool and retain its properties.

This is used in React 16 and earlier and for React Native. From React 17 is event pooling no more used. e.persist() is still available on the React event object, but now it doesn’t do anything.

function handleClick(event) {
  console.log(event.type); // 'click'

  // Using the event asynchronously
  setTimeout(() => {
    console.log(event.type); // Error: Cannot access 'type' because the event has been cleared.
  }, 1000);
}

function handleClickWithPersist(event) {
  event.persist(); // Prevent event pooling
  console.log(event.type); // 'click'

  setTimeout(() => {
    console.log(event.type); // 'click'
  }, 1000);
}

export default function App() {
  return (
    <div>
      <button onClick={handleClick}>Click without persist</button>
      <button onClick={handleClickWithPersist}>Click with persist</button>
    </div>
  );
}

---

Debounce And Throttle Events

Debouncing

Debouncing ensures that a function is only called after a specified delay, triggered once the event stops firing.

It’s useful when you want to limit the number of times a function is called during frequent events, such as typing in an input field.

import { useState, useEffect } from "react";

function SearchInput() {
  const [query, setQuery] = useState("");
  const [debouncedQuery, setDebouncedQuery] = useState("");

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedQuery(query);
    }, 500); // 500ms debounce

    return () => {
      clearTimeout(handler); // Clear the previous timeout on each re-render
    };
  }, [query]); // Only re-run the effect when `query` changes

  const handleInputChange = (e) => {
    setQuery(e.target.value);
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleInputChange} placeholder="Search..." />
      <p>Query: {query}</p>
      <p>Debounced Query: {debouncedQuery}</p>
    </div>
  );
}

Throttling

Throttling ensures that a function is only called at most once in a specified time period, no matter how often the event is triggered.

It’s useful for limiting the frequency of actions like scroll or resize events.

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

function ScrollComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);
  const [lastScrollTime, setLastScrollTime] = useState(0);

  const handleScroll = () => {
    const now = Date.now();

    // Throttle by 1000ms (1 second)
    if (now - lastScrollTime >= 1000) {
      setScrollPosition(window.scrollY);
      setLastScrollTime(now);
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [lastScrollTime]); // Update on lastScrollTime change

  return (
    <div style={{ height: "5000px" }}>
      <p style={{ position: "fixed" }}>Scroll Position: {scrollPosition}</p>
    </div>
  );
}