Skip to content

Instantly share code, notes, and snippets.

@albertorestifo
Created April 12, 2017 15:55
Show Gist options
  • Save albertorestifo/83877c3e4c81066a592a47c4dcf6753b to your computer and use it in GitHub Desktop.
Save albertorestifo/83877c3e4c81066a592a47c4dcf6753b to your computer and use it in GitHub Desktop.
Logs the diff between current and previous props on a react element
componentDidUpdate(prevProps) {
console.log('Rrow update diff:');
const now = Object.entries(this.props);
const added = now.filter(([key, val]) => {
if (prevProps[key] === undefined) return true;
if (prevProps[key] !== val) {
console.log(`${key}
- ${JSON.stringify(val)}
+ ${JSON.stringify(prevProps[key])}`);
}
return false;
});
added.forEach(([key, val]) => console.log(`${key}
+ ${JSON.stringify(val)}`));
}
@PabloLION
Copy link

PabloLION commented Sep 2, 2021

  1. The order of line 10 and line 11 is reversed?
    I just changed them like this:
          - ${JSON.stringify(prevProps[key])}
          + ${JSON.stringify(val)}`);
  1. Also, I would like to ask if the ten starting space is a convention?
  2. Thrid thing: maybe add some red/green color to the + and -?
  3. Can I PR this?

@albertorestifo
Copy link
Author

@Pablion this is a quick script I used maybe twice to debug some React issues.

Feel free to fork it and do whatever you want with it.

@PabloLION
Copy link

I used only once XD. but I like it!

@PabloLION
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment