Creating Own useMemo hook in React | useMemo Hook Polyfill

Introduction to useMemo Hook

In React, optimization plays a crucial role in ensuring the smooth and efficient performance of applications.

One of the optimization techniques provided by React is the useMemo hook.

This hook is used to memoize expensive calculations, preventing unnecessary re-renders of components.

When dealing with complex computations or heavy data processing, useMemo can significantly enhance performance by caching the results and only recomputing them when the dependencies change.

How useMemo Works

The useMemo hook takes two arguments: a callback function and an array of dependencies.

It calculates the memoized value based on the provided callback function and the dependencies array.

If any of the dependencies change between renders, useMemo will recompute the value; otherwise, it returns the cached value from the previous render.

Creating a Custom useMemo Hook Polyfill

To understand how useMemo works internally and create a custom polyfill for it, let's examine the code snippet provided:

//----------------------- useCustomMemo() --------------------------

import { useRef, useEffect } from "react"

const checkChanges = (prevDeps, deps) => {
    if(prevDeps === null) return false
    if (prevDeps?.length !== deps.length) return false;

    for (let i = 0; i < deps.length; i++) {
        if (prevDeps[i] !== deps[i]) return false;
    }

    return true;

}

export const useCustomMemo = (callback, deps) => {
    //variable or state -> for storing cached Values
    const memoizedRef = useRef(null) // useRef because it will persist the value throughout lifecycle of the component
    //changes in deps
    if (!memoizedRef.current || !checkChanges(memoizedRef?.current?.deps, deps)) {
        memoizedRef.current = {
            value: callback(), // will run and return the value and get stored
            deps: deps
        }
    }
    //cleanup logic
    useEffect(()=>{
        return ()=>{
            memoizedRef.current = null
        }
    },[])
    //return the result

    return memoizedRef.current.value;
}
        

Gist Link: https://gist.github.com/sandy088/0bbbedecd57538d5ac0baaf6c6ab7462

In the provided code snippet, useCustomMemo is a custom hook designed to replicate the functionality of useMemo.

It utilizes useRef to persist the memoized value throughout the component's lifecycle. The check changes function compares the previous dependencies with the current ones to determine if recalculation is necessary.

Explanation of Code

• useCustomMemo Function: This function takes a callback function (callback) and an array of dependencies (deps) as arguments. It initializes a memoizedRef using useRef to store the memoized value and its dependencies.
• checkChanges Function: This function compares the previous dependencies (prevDeps) with the current dependencies (deps). If there are any differences, it indicates that recalculation is required.
• Memoization Logic: Inside the useCustomMemo function, if the memoized value is not yet computed or if there are changes in dependencies, the callback function is executed, and the result is stored along with the current dependencies.
• Cleanup Logic: A cleanup function is implemented using useEffect to reset the memoized value when the component unmounts.

Implementing the Custom useMemo Hook Polyfill

Now, let's see how to use the custom useCustomMemo hook in a React component:

//----------------------- App.jsx -------------------------------

import { useCallback, useMemo, useState } from "react"
import { useCustomMemo } from "../pollyfills/useCustomMemo";

export const Memoize = () =>{
    const [counter, setCounter] = useState(0);
    const [counter2, setCounter2] = useState(100);

    const heavyCalcs = () =>{
        console.log("heavy Calcs... ", counter2)
        return counter*counter;
    }

    // const havyCalcs2 = useCallback(heavyCalcs,[counter])
    const havyCalcs2 = useCustomMemo(heavyCalcs, [counter] )
    return(
        <div>
            <p>This is counter value: {havyCalcs2}</p>
            <button onClick={()=>{  
                setCounter(state => state+1)}}>Increment</button>

            <p>This is counter2 value: {counter2}</p>
            <button onClick={()=>{setCounter2(state => state-1)}}>Decrement</button>
        </div>
    )
}        

Gist Link: https://gist.github.com/sandy088/0bbbedecd57538d5ac0baaf6c6ab7462

In the Memoize component, useCustomMemo is utilized to memoize the heavyCalcs function based on the counter dependency. This ensures that the heavy computations are only performed when necessary, optimizing the performance of the component.

Conclusion

Creating a custom useMemo hook polyfill allows developers to gain a deeper understanding of how memoization works in React. By replicating the functionality of built-in hooks like useMemo, developers can customize optimization techniques to suit specific project requirements, enhancing performance and user experience.

FAQs

1. What is useMemo in React? useMemo is a React hook used for memoizing expensive calculations. It helps optimize performance by caching the results of computations and only recomputing them when necessary.
2. When should I use useMemo? You should use useMemo when dealing with computationally expensive operations or when the result of a computation depends on certain inputs. It helps prevent unnecessary re-renders by memoizing the results.
3. How does useMemo differ from useCallback? useMemo is used to memoize values, while useCallback is used to memoize functions. While both hooks aim to optimize performance, they serve different purposes based on the type of value being memoized.
4. Can I use useMemo for all computations in React? While useMemo is useful for optimizing performance, it's essential to use it judiciously. Overusing useMemo can lead to unnecessary complexity in the code. Reserve its usage for computations that are genuinely expensive and benefit from memoization.
5. Are custom hook polyfills like useCustomMemo recommended for production use? Custom hook polyfills can be beneficial for learning purposes or for specific project requirements. However, for production use, it's generally recommended to rely on built-in React hooks whenever possible, as they are thoroughly tested and optimized for performance.