https://github.com/profusion/with-props-change-logger

Log Changed Properties in a React Component
https://github.com/profusion/with-props-change-logger

Last synced: about 1 month ago
JSON representation

Log Changed Properties in a React Component

• Host: GitHub
• URL: https://github.com/profusion/with-props-change-logger
• Owner: profusion
• License: mit
• Created: 2022-03-26T01:09:14.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-12T20:39:23.000Z (over 1 year ago)
• Last Synced: 2024-09-09T14:28:05.529Z (4 months ago)
• Language: TypeScript
• Size: 1.03 MB
• Stars: 2
• Watchers: 21
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```typescript

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

function MyComponent(props: { a: number[] }) {

  return (

    
{JSON.stringify(a)}

  );

}


const LoggedComponent = withPropsChangeLogger(MyComponent);

function OtherComponent() {

  return (

    

  );

}

```

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:

```typescript

const LoggedComponent = withPropsChangeLogger(MyComponent, {

  verbose: false,

});

```

Produces:

```

PROP CHANGED: SimpleComponent a from: object to: object

PROP RE-RENDERED DUE PROPS: SimpleComponent

```