Logs change with git diff style between current and previous object

propdiff.js

// Example usage for React class component. 
// Can also it for state or non-react JS.
componentDidUpdate(prevProps) {
  logUpdatedDiff(prevProps, this.props)
}

/**
 * @param  {object} prev: previous to compare
 * @param  {object} current: current to compare
 * @return {void}
 */
function logUpdatedDiff(prev, current) {
  const now = Object.entries(current);
  const added = now.filter(([key, val]) => {
    if (prev[key] === undefined) return true;
    if (prev[key] !== val) {
      console.log(
        `${key}
        %c- ${JSON.stringify(prev[key])}
        %c+ ${JSON.stringify(val)}`,
        "color:red;",
        "color:green;"
      );
    }
    return false;
  });
  added.forEach(([key, val]) =>
    console.log(
      `${key}
        %c+ ${JSON.stringify(val)}`,
      "color:green;"
    )
  );
}

Very handy! Thank you

Very handy! Thank you

@dmilanp You are welcome. Although shown on top-left of this page, I still want to point out that this file originated by modifying albertorestifo/propdiff.js, adding some styling and change some order.