README.md

Hack to log when a React component gets rendered

Set localStorage.debug = 'react'.

Make sure you install this before calling ReactDOM.render()

index.js

import React from 'react'
import monkeyPatch from './monkeyPatch'

monkeyPatch(React)

// ... include your normal ReactDOM.render()

monkeyPatch.js

import Debug from 'debug'
const debug = Debug('react')

const IGNORE_KEYS = new Set([
  'length',
  'name',
  'prototype',
])

const IGNORE_HOCS = new Set([
  'Connect',
  'WithStyles',
  'InjectIntl',
  'pure',
  'WithFormik',
  'WithTheme',
])

export default function (React, options = {}) {
  const hocs = options.hocs
    ? options.hocs
    : IGNORE_HOCS

  const originalCreateElement = React.createElement
  React.createElement = (type, ...args) => {
    if (!type || type.__isMonkeyPatched) {
      return originalCreateElement(type, ...args)
    }

    const name = type.displayName || type.name
    // Ignore our common HOCs
    if (name) {
      for (const hoc of hocs) {
        if (name.startsWith(`${hoc}(`)) {
          return originalCreateElement(type, ...args)
        }
      }
    }

    if (type.prototype && type.prototype.render) {
      type.__isMonkeyPatched = true
      const render = type.prototype.render
      const name = type.displayName || type.name

      type.prototype.render = function(...args) {
        const props = this.props
        const state = this.state
        debug('render: %s', name, {props, state, args})
        return render.call(this, ...args)
      }
    } else {
      const name = type.displayName || type.name
      if (name) {
        type.__isMonkeyPatched = true

        // Wrap in an object so Function#name can be inferred and be the same
        // as the Component that we are wrapping.
        const obj = {
          [name]: function(...args) {
            const props = args.length
              ? args[0]
              : undefined
            debug('render: %s', name, {props, args})
            return type(...args)
          }
        }

        obj[name].__isMonkeyPatched = true

        for (const key of Object.getOwnPropertyNames(type)) {
          if (IGNORE_KEYS.has(key)) continue
          if (!obj[name][key]) {
            obj[name][key] = type[key]
          }
        }

        return originalCreateElement(obj[name], ...args)
      }
    }
    return originalCreateElement(type, ...args)
  }
}