@gechiui/compose
Version:
GeChiUI higher-order components (HOCs).
48 lines (43 loc) • 1.61 kB
JavaScript
/**
* Internal dependencies
*/
import usePrevious from '../use-previous'; // Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case
// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
/* eslint-disable jsdoc/check-types */
/**
* Hook that performs a shallow comparison between the preview value of an object
* and the new one, if there's a difference, it prints it to the console.
* this is useful in performance related work, to check why a component re-renders.
*
* @example
*
* ```jsx
* function MyComponent(props) {
* useWarnOnChange(props);
*
* return "Something";
* }
* ```
*
* @param {object} object Object which changes to compare.
* @param {string} prefix Just a prefix to show when console logging.
*/
function useWarnOnChange(object) {
let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Change detection';
const previousValues = usePrevious(object);
Object.entries(previousValues !== null && previousValues !== void 0 ? previousValues : []).forEach(_ref => {
let [key, value] = _ref;
if (value !== object[
/** @type {keyof typeof object} */
key]) {
// eslint-disable-next-line no-console
console.warn(`${prefix}: ${key} key changed:`, value, object[
/** @type {keyof typeof object} */
key]
/* eslint-enable jsdoc/check-types */
);
}
});
}
export default useWarnOnChange;
//# sourceMappingURL=index.js.map