How to create useCallback hook in vanilla js?

The useCallback hook is a feature provided by React, and it is not available in vanilla JavaScript. React's useCallback is specifically designed to memoize functions to prevent unnecessary re-creations of the function reference, which can be useful in certain scenarios to optimize performance in React functional components.

If you are working with React, you can use the useCallback hook like this:

import React, { useCallback } from 'react';

function MyComponent() {
  const myFunction = useCallback(() => {
    // Your function logic here
  }, []); // Dependencies array

  // Rest of your component code
}

However, if you are looking for a way to memoize functions in vanilla JavaScript without using React, you can create a simple memoization function. Here's a basic example using closure:

function useCallback(callback) {
  const memoizedCallback = function (...args) {
    if (!memoizedCallback.cache) {
      memoizedCallback.cache = new Map();
    }

    const key = args.join('-');
    if (memoizedCallback.cache.has(key)) {
      return memoizedCallback.cache.get(key);
    }

    const result = callback(...args);
    memoizedCallback.cache.set(key, result);
    return result;
  };

  return memoizedCallback;
}

// Example usage:
const myFunction = useCallback((a, b) => {
  console.log('Executing function with arguments:', a, b);
  return a + b;
});

console.log(myFunction(1, 2)); // Output: Executing function with arguments: 1 2
console.log(myFunction(1, 2)); // Output: (No execution, result retrieved from cache)

Note that this is a simple memoization technique, and it may not cover all use cases or edge cases that React's useCallback hook does. If you are working with React, it's recommended to use the useCallback hook provided by React itself.

Support My Work ❤️

If you enjoy my content and find it valuable, consider supporting me by buying me a coffee. Your support helps me continue creating and sharing useful resources. Thank you!

Connect with Me 🌍

Let’s stay connected! You can follow me or reach out on these platforms:

🔹 YouTube – Tutorials, insights & tech content

🔹 LinkedIn – Professional updates & networking

🔹 GitHub – My open-source projects & contributions

🔹 Instagram – Behind-the-scenes & personal updates

🔹 X (formerly Twitter) – Quick thoughts & tech discussions

I’d love to hear from you—whether it’s feedback, collaboration ideas, or just a friendly hello!

Disclaimer

This content has been generated with the assistance of AI. While I strive for accuracy and quality, please verify critical information independently.