ahooks/es/useTrackedEffect/index.js

react hooks library

import { useEffect, useRef } from 'react';
const diffTwoDeps = (deps1, deps2) => {
    // Let's do a reference equality check on 2 dependency list.
    // If deps1 is defined, we iterate over deps1 and do comparison on each element with equivalent element from deps2
    // As this func is used only in this hook, we assume 2 deps always have same length.
    return deps1
        ? deps1
            .map((_, idx) => (!Object.is(deps1[idx], deps2 === null || deps2 === void 0 ? void 0 : deps2[idx]) ? idx : -1))
            .filter((ele) => ele >= 0)
        : deps2
            ? deps2.map((_, idx) => idx)
            : [];
};
const useTrackedEffect = (effect, deps) => {
    const previousDepsRef = useRef(undefined);
    useEffect(() => {
        const changes = diffTwoDeps(previousDepsRef.current, deps);
        const previousDeps = previousDepsRef.current;
        previousDepsRef.current = deps;
        return effect(changes, previousDeps, deps);
    }, deps);
};
export default useTrackedEffect;