@supunlakmal/hooks
Version:
A collection of reusable React hooks
37 lines • 2 kB
JavaScript
import { useEffect, useRef } from 'react';
export const noop = () => { };
export const isBrowser = typeof globalThis !== 'undefined' &&
typeof navigator !== 'undefined' &&
typeof document !== 'undefined';
export const isStrictEqual = (previous, next) => previous === next;
export const truthyAndArrayPredicate = (conditions) => conditions.every(Boolean);
export const truthyOrArrayPredicate = (conditions) => conditions.some(Boolean);
const myUseEffect = (callback, dependencies) => {
return useEffect(callback, dependencies);
};
export const basicDepsComparator = (prevDeps, nextDeps) => prevDeps.length === nextDeps.length &&
prevDeps.every((item, i) => item === nextDeps[i]);
/**
* Like `useEffect` but uses provided comparator function to validate dependency changes.
*
* @param callback Function that will be passed to the underlying effect hook.
* @param deps Dependency list like the one passed to `useEffect`.
* @param comparator Function that compares two dependency arrays,
* and returns `true` if they're equal.
* @param effectHook Effect hook that will be used to run
* `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
* placed as the first argument and the dependency list as second.
* @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
* after the `callback` and the dependency list.
*/
// eslint-disable-next-line max-params
export const useCustomCompareEffect = (callback, deps, comparator = basicDepsComparator, effectHook = myUseEffect, ...effectHookRestArgs) => {
const dependencies = useRef(undefined);
// Effects are not run during SSR, therefore, it makes no sense to invoke the comparator
if (dependencies.current === undefined ||
(isBrowser && !comparator(dependencies.current, deps))) {
dependencies.current = deps;
}
effectHook(callback, dependencies.current, ...effectHookRestArgs);
};
//# sourceMappingURL=useCustomCompareEffect.js.map