Easy react lifecycle hook debugging

index.jsx

import {Component} from 'react'
import {diff} from 'deep-object-diff'

const flattenObject = function(ob) {
  const toReturn = {}

  for (const i in ob) {
    if (!ob.hasOwnProperty(i)) continue

    if (typeof ob[i] == 'object') {
      const flatObject = flattenObject(ob[i])
      for (const x in flatObject) {
        if (!flatObject.hasOwnProperty(x)) continue

        toReturn[i + '.' + x] = flatObject[x]
      }
    } else {
      toReturn[i] = ob[i]
    }
  }
  return toReturn
}
const compareProps = (prevProps, nextProps) => {
  const props = [prevProps, nextProps].map(flattenObject)
    const changed = Object.keys(diff(...props))
    changed.length > 0 && console.table(props, changed)
}

class extends Component {
  componentWillReceiveProps(nextProps) {
    console.group('componentWillReceiveProps')
    compareProps(this.props, nextProps)
    console.groupEnd('componentWillReceiveProps')
  }
}