React Performance Optimization Using Memoization With Hooks

import { useMemo, useCallback } from 'react';

/**
 * Optimizes performance by memoizing expensive function calls.
 * 
 * @param {function} expensiveFunction The function to be memoized.
 * @param {array} dependencies The dependencies for the memoization.
 * @return {function} The memoized function.
 */
const useMemoizedExpensiveFunction = (expensiveFunction, dependencies) => {
   // Utilize useMemo to memoize the expensive function call.
   const memoizedResult = useMemo(() => {
      // Call the expensive function and store its result.
      return expensiveFunction();
   }, dependencies); // Only recalculate when dependencies change.

   return memoizedResult;
};

export const useMemoizedExpensiveFunction;

const ExampleComponent = () => {
   // Define an expensive function for demonstration purposes.
   const expensiveFunction = useCallback(() => {
      // Simulate an expensive computation.
      for (let i = 0; i < 10000000; i++) {}
      return 'Result from expensive computation';
   }, [1]); // Add a primitive value to the dependency array

   // Memoize the expensive function using the custom hook.
   const memoizedResult = useMemoizedExpensiveFunction(expensiveFunction, [1]);

   return (
      <div>
         <p>Example Component</p>
         <p>Memoized Result: {memoizedResult}</p>
      </div>
   );
};

export default ExampleComponent;