ReactHustle

How to Implement useCallback hook with Arguments

Jasser Mark Arioste

Jasser Mark Arioste

How to Implement useCallback hook with Arguments

Hello, hustler! In this short tutorial, you'll learn how to pass arguments to the function inside a useCallback hook. We'll also use typescript in this tutorial.

The Problem #

Sometimes, we want to pass a callback function to user events but we want to cache or memoize the function using useCallback. However, the syntax gets confusing (especially for beginners) when we add a function inside a useCallback hook. In this tutorial, you'll learn 3 simple steps to implement this and it's not that confusing once you learn it.

Step 1 - Create the Callback function #

First,  we just need to create the callback function as normal without using useCallback. You can already add parameters to your callback function at this point.

For example:

import React from "react";

const MyComponent = () => {
  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log("button is clicked", e.currentTarget.id);
  };
  return (
    <div>
      <button onClick={onClick} id="my-button">
        Click Me!
      </button>
    </div>
  );
};

export default MyComponent;
12345678910111213141516

Notice that we already have the e parameter for our onClick handler.

Step 2 - Use the useCallback hook #

Next, we just need to pass our callback function to our useCallback hook. For example:

import React, { useCallback } from "react";

const MyComponent = () => {
  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log("button is clicked", e.currentTarget.id);
  };
  // pass the onClick handler as-is
  const memoizedOnClick = useCallback(onClick, []);
  return (
    <div>
      {/* use the memoizedOnClick handler */}
      <button onClick={memoizedOnClick} id="my-button">
        Click Me!
      </button>
    </div>
  );
};

export default MyComponent;
12345678910111213141516171819

After this step, we have a perfectly memorized event handler. You may stop here depending on your team's coding style.

Step 3 - Refactoring #

The next step is refactoring. Instead of declaring the onClick handler and passing it to the useCallback hook, we can directly use the anonymous function instead.

import React, { useCallback } from "react";

const MyComponent = () => {
  //   const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  //     console.log("button is clicked", e.currentTarget.id);
  //   };
  
  const memoizedOnClick = useCallback((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log("button is clicked", e.currentTarget.id);
  }, []);

  return (
    <div>
      {/* use the memoizedOnClick handler */}
      <button onClick={memoizedOnClick} id="my-button">
        Click Me!
      </button>
    </div>
  );
};

export default MyComponent;
12345678910111213141516171819202122

Checking #

The useCallback hook ultimately returns the function you pass in it. For example, in your VSCode editor, if you hover over the memoizedOnClick constant, you'll see that it is a function with the following signature: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>void.

React useCallback function with arguments

Conclusion #

You learned how to add arguments to the useCallback hook which ultimately returns whatever function you pass in it in a memoized form which means that it doesn't change between re-renders if its dependencies don't change as well.

Resources #

For further reading, you may check out the React docs.

Credits: Image by Logan Wenger from Pixabay

Share this post!

Related Posts

Disclaimer

This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle