React debug component update

debug_component_update_snippet.js

componentWillUpdate (nextProps, nextState) {
  const componentName = this.constructor.name
  const { props, state } = this

  const logUpdate = (location, key, value, nextValue) => {
    console.groupCollapsed(`${componentName} - ${location}.${key} changed!`)
    console.log('before: ', value[key])
    console.log('after: ', nextValue[key])
    console.groupEnd()
  }

  // shallow compare props
  for (let key in props) {
    if (!(key in nextProps) || props[key] !== nextProps[key]) {
      logUpdate('props', key, props, nextProps)
    }
  }
  for (let key in nextProps) {
    if (!(key in props)) {
      logUpdate('props', key, props, nextProps)
    }
  }

  // shallow compare state
  for (let key in state) {
    if (!(key in nextState) || state[key] !== nextState[key]) {
      logUpdate('state', key, state, nextState)
    }
  }
  for (let key in nextState) {
    if (!(key in state)) {
      logUpdate('state', key, state, nextState)
    }
  }
}