https://github.com/mozmorris/use-changed-props

React Hook to output props that have changed https://www.npmjs.com/package/use-changed-props
https://github.com/mozmorris/use-changed-props

react react-hooks

Last synced: 3 months ago
JSON representation

React Hook to output props that have changed https://www.npmjs.com/package/use-changed-props

• Host: GitHub
• URL: https://github.com/mozmorris/use-changed-props
• Owner: mozmorris
• License: mit
• Created: 2020-04-23T20:08:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T14:06:11.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T10:48:35.556Z (3 months ago)
• Topics: react, react-hooks
• Language: TypeScript
• Homepage: https://codepen.io/mozmorris/pen/BaopXRX?editors=1111
• Size: 2.15 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-changed-props

A React hook to log which props have changed. The hook will also include the changes for each prop, which is useful for tracking down unnecessary work when nothing really changed eg. a reference was updated.

https://www.npmjs.com/package/use-changed-props

## Demo

https://codepen.io/mozmorris/pen/BaopXRX?editors=1111

## Installation

```

npm install use-changed-props

```

or

```

yarn add use-changed-props

```

## Usage

### Log changed props to console

```jsx

import useChangedProps from "use-changed-props"

const App = props => {

  // log props changes

  useChangedProps(props)

  return 

}

```

### Disable logging

```jsx

import useChangedProps from "use-changed-props"

const App = props => {

  // disable logging

  const options = { log: false }

  // store changed props

  const changedProps = useChangedProps(props, options)

  return 

}

```

## Options

| Option                | Description                                                               |  Default     |

| --------------------- | --------------------------------------------------------------------------|------------- |

| `log`                 | Should automatically log prop changes to the console                      | `true`       |

## License

MIT

## Motivation

"How to check what props have changed?"

"Determine which props caused a re-render"

I've found myself Googling these questions on more than one occasion. Ideally I can now just drop this hook in to my component and get feedback about which props have changed and also the differences.