Skip to content

Instantly share code, notes, and snippets.

@reggie3
Created June 14, 2019 18:10
Show Gist options
  • Save reggie3/84a87984bce3551bc9675ba2a40e0268 to your computer and use it in GitHub Desktop.
Save reggie3/84a87984bce3551bc9675ba2a40e0268 to your computer and use it in GitHub Desktop.
Find differences in react prop and state updates
public componentDidUpdate(prevProps, prevState) {
console.log('Rrow update diff:');
const nowProps = Object.entries(this.props);
const addedProps = nowProps.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;
});
addedProps.forEach(([key, val]) =>
console.log(`${key}
+ ${JSON.stringify(val)}`)
);
const nowState = Object.entries(this.state);
const addedState = nowState.filter(([key, val]) => {
if (prevState[key] === undefined) {
return true;
}
if (prevState[key] !== val) {
console.log(`${key}
- ${JSON.stringify(val)}
+ ${JSON.stringify(prevState[key])}`);
}
return false;
});
addedState.forEach(([key, val]) =>
console.log(`${key}
+ ${JSON.stringify(val)}`)
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment