Log Changed Properties in a React Component

This HOC (High Order Component) will wrap an existing class or function component and track properties that changed.

This is useful if you're building a memoized component but it keeps rendering and you want to know the property that is causing that.

It's meant to be used during development, production builds should remove it.

Example

import withPropsChangeLogger from '@profusion/with-props-change-logger';

function MyComponent(props: { a: number[] }) {
  return (
    <div>{JSON.stringify(a)}</div>
  );
}

const LoggedComponent = withPropsChangeLogger(MyComponent);

function OtherComponent() {
  return (
    <LoggedComponent a={[1, 2, 3, 4, 5, 6, 7, 8]}>
  );
}

When changed (say from [1234] to [1,2,3,4,5,6,7,8]), produces:

PROP CHANGED: SimpleComponent a from:
	[1234]
to:
	[1,2,3,4,5,6,7,8]
PROP RE-RENDERED DUE PROPS: SimpleComponent

NOTE: objects (including arrays) and functions are compared just like React does, using a shallow comparison! It doesn't matter if the properties, array elements or the function body are the same, if the instance is different, they will be logged. Be sure to keep it stable (ie: using the old instances) with useMemo(), useRef() or useCallback().

Verbosity

If you find the amount of information too verbose, you may want to provide verbose: false and it will show only the typeof result, such as:

const LoggedComponent = withPropsChangeLogger(MyComponent, {
  verbose: false,
});

Produces:

PROP CHANGED: SimpleComponent a from: object to: object
PROP RE-RENDERED DUE PROPS: SimpleComponent