Custom React hook to maintain a stable reference for an array when its values change

useStableArray.tsx

import {useEffect, useState} from 'react';

export function useStableArray<TType>(
    items?: Array<TType>
): Array<TType> | undefined {
    const [stableArray, setStableArray] = useState<Array<TType>>(items);

    useEffect(() => {
        if (JSON.stringify(items) !== JSON.stringify(stableArray)) {
            setStableArray(items);
        }
    }, [items, stableArray]);

    return stableArray;
}

You could also avoid rerenders using a ref, and also use isEqual from lodash (which is faster), but I like the above because it's easy to read and understand.

import isEqual from 'lodash.isequal';
import {useRef} from 'react';

export function useStableArray<TType>(items?: Array<TType>): Array<TType> | undefined {
    const [stableArray, setStableArray] = useState<Array<TType>>(items);
    const prevItemsRef = useRef(items);

    useEffect(() => {
        if (!isEqual(prevItemsRef.current, items)) {
            setStableArray(items);
            prevItemsRef.current = items;
        }
    }, [items]);

    return stableArray;
}