@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
120 lines • 4.62 kB
JavaScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useEffect, useRef } from 'react';
export { useDebounceValue, useDebounceCallback, useWindowSize, useOnClickOutside, useInterval, useMediaQuery, useCopyToClipboard, useScrollLock, useEventListener, useResizeObserver, } from 'usehooks-ts';
/**
* Below are hooks that cannot be found in `usehooks-ts`
* but are used in some projects.
* 1. usePrevious
* 2. useEffectDebugger
* 3. useRenderCount
*/
/**
* The `usePrevious` hook tracks a variable's previous value in a functional component,
* useful for comparing current and past values to trigger actions or render changes.
*/
export function usePrevious(value) {
// The ref object is a generic container whose current property is mutable
// and can hold any value, similar to an instance property on a class
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ref = useRef();
// Store current value in ref
useEffect(() => {
ref.current = value;
}, [value]); // Only re-run if value changes
// Return previous value (happens before update in useEffect above)
return ref.current;
}
/**
* The `useEffectDebugger` hook is a wrapper around the `useEffect` hook
* that logs the dependencies of the effect when they change.
*
* Uses the `usePrevious` hook.
*
* Source: https://stackoverflow.com/a/59843241/3247715
*/
export function useEffectDebugger(effectHook, dependencies, dependencyNames = []) {
const previousDeps = usePrevious(dependencies);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const changedDeps = dependencies.reduce((accum, dependency, index) => {
if (previousDeps === undefined) {
return accum;
}
if (dependency !== previousDeps[index]) {
const keyName = dependencyNames[index] || index;
return Object.assign(Object.assign({}, accum), { [keyName]: {
before: previousDeps[index],
after: dependency,
} });
}
return accum;
}, {});
if (Object.keys(changedDeps).length) {
console.info('[use-effect-debugger] ', changedDeps);
}
useEffect(() => {
return effectHook();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dependencies);
}
/**
* The `useRenderCount` hook returns the number of times a component has rendered.
*/
export function useRenderCount() {
const count = useRef(0);
count.current++;
return count.current;
}
/**
* The `useRenderDebugger` outputs to console what props or states are causing a render (or re-render) of a component
* if all relevant props and states variables are passed to the hook.
* For debugging purposes only.
*
* Howto use:
* Place the hook at the top of the component you want to debug and call it like this:
* useRenderDebugger('MyComponent', props);
*
* if there are state variables include them as well:
*
* useRenderDebugger('MyComponent', { ...props, stateVar1, stateVar2 });
*
* @param componentName Name of the component to debug
* @param propsAndStates an object containing all props and states variables of the component
*/
export const useRenderDebugger = (componentName, propsAndStates) => {
const prev = useRef(propsAndStates);
useEffect(() => {
const changedPropsOrState = {};
Object.entries(propsAndStates).forEach(([key, newValue]) => {
if (prev.current[key] !== newValue) {
changedPropsOrState[key] = {
old: prev.current[key],
new: newValue,
};
}
}, {});
if (Object.keys(changedPropsOrState).length > 0) {
console.debug(`[${componentName}] Re-rendered due to:`, changedPropsOrState);
}
prev.current = propsAndStates;
});
};
//# sourceMappingURL=index.js.map