Performance Engineering with React (Part 2)

WhyDidYouUpdateMixin.coffee

_ = require "underscore"

###
Drop this mixin into a component that wastes time according to Perf.getWastedTime() to find
out what state/props should be preserved. Once it says "Update avoidable!" for {state, props},
you should be able to drop in React.addons.PureRenderMixin

React.createClass
  mixins: [WhyDidYouUpdateMixin]
###

isRequiredUpdateObject = (o) ->
  Array.isArray(o) or (o and o.constructor is Object::constructor)

notify = (status, o1, o2) ->
  console.warn('Update %s', status)
  console.log('%cbefore', 'font-weight: bold', o1)
  console.log('%cafter ', 'font-weight: bold', o2)

deepDiff = (o1, o2, p) ->
  if !_.isEqual(o1, o2)
    console.group(p)
    if [o1, o2].every(_.isFunction)
      notify('avoidable?', o1, o2)
    else if ![o1, o2].every(isRequiredUpdateObject)
      notify('required.', o1, o2)
    else
      keys = _.union(_.keys(o1), _.keys(o2))
      for key in keys
        deepDiff(o1[key], o2[key], key)
    console.groupEnd()
  else if o1 isnt o2
    console.group(p)
    notify('avoidable!', o1, o2)
    if _.isObject(o1) and _.isObject(o2)
      keys = _.union(_.keys(o1), _.keys(o2))
      for key in keys
        deepDiff(o1[key], o2[key], key)
    console.groupEnd()

module.exports =
  componentDidUpdate: (prevProps, prevState) ->
    deepDiff {props: prevProps, state: prevState},
             {props: @props, state: @state},
             @constructor.displayName