As React developers, we often face scenarios where multiple rapid state changes need to be synchronized with an API. Making an API call for every tiny change can be inefficient and taxing on both the client and server. This is where debouncing and clever state management come into play. In this article, we'll build a custom React hook that captures parallel API update calls by merging payloads and debouncing the API call.

The Problem

Imagine an input field where users can adjust settings or preferences. Each keystroke or adjustment could trigger an API call to save the new state. If a user makes several changes in quick succession, this could lead to a flood of API requests:

• Inefficient use of network resources.
• Potential race conditions.
• Unnecessary load on the server.

Enter Debouncing

Debouncing is a technique used to limit the rate at which a function can fire. Instead of calling the function immediately, you wait for a certain period of inactivity before executing it. If another call comes in before the delay is over, the timer resets.

Why Use Debouncing?

• Performance Improvement: Reduces the number of unnecessary API calls.
• Resource Optimization: Minimizes server load and network usage.
• Enhanced User Experience: Prevents lag and potential errors from rapid, successive calls.

The Role of useRef

In React, useRef is a hook that allows you to persist mutable values between renders without triggering a re-render. It's essentially a container that holds a mutable value.

Why Use useRef Here?

• Persist Accumulated Updates: We need to keep track of the accumulated updates between renders without causing re-renders.
• Access Mutable Current Value: useRef gives us a .current property that we can read and write.

The useDebouncedUpdate Hook

Let's dive into the code and understand how it all comes together.

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

Breaking It Down

1. Accumulating Updates with useRef

We initialize a useRef called accumulatedUpdates to store the combined parameters of all incoming updates.

const accumulatedUpdates = useRef(null);

2. Debouncing the API Call

We create a debounced function processUpdates using the debounce utility from Material UI.

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• Why useRef for processUpdates? We use useRef to ensure that the debounced function is not recreated on every render, which would reset the debounce timer.

3. Handling Updates with useCallback

The handleUpdate function is responsible for accumulating updates and triggering the debounced API call.

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• Merging Params: We merge the new parameters with any existing ones to ensure all updates are captured.
• Trigger Debounce: Each time handleUpdate is called, we trigger processUpdates(), but the actual API call is debounced.

4. Cleaning Up with useEffect

We clear the debounced function when the component unmounts to prevent memory leaks.

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

How It Works

1. Accumulate Parameters: Each update adds its parameters to accumulatedUpdates.current, merging with any existing parameters.
2. Debounce Execution: processUpdates waits for delay milliseconds of inactivity before executing.
3. API Call: Once debounced time elapses, apiUpdate is called with the merged parameters.
4. Reset Accumulated Updates: After the API call, we reset accumulatedUpdates.current to null.

Usage Example

Here's how you might use this hook in a component:

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    

       handleChange("username", e.target.value)}
      />
       handleChange("notifications", e.target.checked)}
      />
    
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• User Actions: As the user types or toggles settings, handleChange is called.
• Debounced Updates: Changes are accumulated and sent to the API after 500ms of inactivity.

Conclusion

By combining debouncing with state accumulation, we can create efficient and responsive applications. The useDebouncedUpdate hook ensures that rapid changes are batched together, reducing unnecessary API calls and improving performance.

Key Takeaways:

• Debouncing is essential for managing rapid successive calls.
• useRef allows us to maintain mutable state without causing re-renders.
• Custom Hooks like useDebouncedUpdate encapsulate complex logic, making components cleaner and more maintainable.

Feel free to integrate this hook into your projects and adjust it to suit your specific needs. Happy coding!