WhyDidYouRenderLogger.ts

import React from "react"
import reactotron from "reactotron-react-native"
import whyDidYouRender, {
  ReasonForUpdate
} from "@welldone-software/why-did-you-render"

const diffTypes = {
  different: "different",
  deepEquals: "deepEquals",
  date: "date",
  regex: "regex",
  reactElement: "reactElement",
  function: "function"
}

const diffTypesDescriptions = {
  [diffTypes.different]: "different objects.",
  [diffTypes.deepEquals]: "different objects that are equal by value.",
  [diffTypes.date]: "different date objects with the same value.",
  [diffTypes.regex]: "different regular expressions with the same value.",
  [diffTypes.reactElement]:
    "different React elements with the same displayName.",
  [diffTypes.function]: "different functions with the same name."
}

function logDifference(thing: {
  Component: React.Component<{}, {}, any>
  displayName: string
  hookName?: string
  prefixMessage: string
  diffObjType: string
  differences: ReasonForUpdate
  values: any
}) {
  let {
    Component,
    displayName,
    hookName,
    prefixMessage,
    diffObjType,
    differences,
    values
  } = thing
  if (differences.hookDifferences && differences.hookDifferences.length > 0) {
    reactotron.log!(
      { [displayName]: Component },
      `${prefixMessage} of ${diffObjType} changes:`
    )
    differences.hookDifferences.forEach(
      ({ pathString, diffType, prevValue, nextValue }) => {
        reactotron.display({
          name: `%c${
            diffObjType === "hook"
              ? `[hook ${hookName} result]`
              : `${diffObjType}.`
          }%c${pathString}%c`,
          value: [
            { [`prev ${pathString}`]: prevValue },
            "!==",
            { [`next ${pathString}`]: nextValue }
          ],
          preview: `${diffTypesDescriptions[diffType]} (more info at ${
            hookName ? "http://bit.ly/wdyr3" : "http://bit.ly/wdyr02"
          })`,
          important: true
        })
      }
    )
  } else if (differences) {
    reactotron.display({
      name: `${displayName}`,
      value: [
        `${prefixMessage} the ${diffObjType} object itself changed but its values are all equal.`,
        diffObjType === "props"
          ? "This could have been avoided by making the component pure, or by preventing its father from re-rendering."
          : "This usually means this component called setState when no changes in its state actually occurred.",
        `More info at ${"http://bit.ly/wdyr02"}`
      ],
      preview: `${prefixMessage} the ${diffObjType} object itself changed but its values are all equal.`,
      important: true
    })

    reactotron.log!([
      `prev ${diffObjType}:`,
      values.prev,
      " !== ",
      values.next,
      `:next ${diffObjType}`
    ])
  }
}

whyDidYouRender(React, {
  onlyLogs: true,
  notifier: info => {
    let {
      Component,
      displayName,
      prevProps,
      nextProps,
      prevState,
      nextState,
      nextHook,
      prevHook,
      reason,
      hookName
    } = info
    let prefixMessage = "Re-rendered because"
    if (reason.propsDifferences) {
      logDifference({
        Component: Component,
        displayName: displayName,
        prefixMessage: prefixMessage,
        diffObjType: "props",
        differences: reason,
        values: { prev: prevProps, next: nextProps }
      })
      prefixMessage = "And because"
    }

    if (reason.stateDifferences) {
      logDifference({
        Component,
        displayName,
        prefixMessage,
        diffObjType: "state",
        differences: reason,
        values: { prev: prevState, next: nextState }
      })
    }

    if (reason.hookDifferences) {
      logDifference({
        Component,
        displayName,
        prefixMessage,
        diffObjType: 'hook',
        differences: reason,
        values: {prev: prevHook, next: nextHook},
        hookName
      })
    }

    if (
      !reason.propsDifferences &&
      !reason.stateDifferences &&
      !reason.hookDifferences
    ) {
      console.log(
        { [displayName]: Component },
        "Re-rendered although props and state objects are the same.",
        "This usually means there was a call to this.forceUpdate() inside the component.",
        `more info at some place`
      )
    }
  }
})