PureComponentDebug

Summary:
Drop in replacement for `React.PureComponent` or can replace `React.PureComponent` for all components.

Logs out what exactly triggered a re-render of a `PureComponent` to make it easier to track down why a component is re-rendering. With some other changes we'll also get component stacks in the YellowBox to make it even easier.

I thought about logging the values, but it's too easy to render something gross or cyclical like react components, so I figured people could break in the debugger to get more detail as needed.

Special flow type should cause errors if people try to commit any usage of this - it should only be used for local debugging.

Reviewed By: yungsters

Differential Revision: D7826325

fbshipit-source-id: fdf7910336452ac1c7acd328c04d441dfb186b59

Libraries/Performance/PureComponentDebug.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const React = require('React');
+
+opaque type DoNotCommitUsageOfPureComponentDebug = {};
+
+/**
+ * Identifies which prop or state changes triggered a re-render of a PureComponent. Usage:
+ *
+ * Change `extends React.PureComponent` to `extends PureComponentDebug` or inject it
+ * everywhere by putting this line in your app setup:
+ *
+ *    React.PureComponent = require('PureComponentDebug');
+ *
+ * Should only be used for local testing, and will trigger a flow failure if you try to
+ * commit any usages.
+ */
+class PureComponentDebug<
+  P: DoNotCommitUsageOfPureComponentDebug,
+  S: ?Object = void,
+> extends React.Component<P, S> {
+  shouldComponentUpdate(nextProps: P, nextState: S): boolean {
+    const tag = this.constructor.name;
+    let ret = false;
+    const prevPropsKeys = Object.keys(this.props);
+    const nextPropsKeys = Object.keys(nextProps);
+    if (prevPropsKeys.length !== nextPropsKeys.length) {
+      ret = true;
+      console.warn(
+        'PureComponentDebug: different prop keys',
+        tag,
+        prevPropsKeys.filter(key => !nextPropsKeys.includes(key)),
+        nextPropsKeys.filter(key => !prevPropsKeys.includes(key)),
+      );
+    }
+    const prevStateKeys = Object.keys(this.state || {});
+    const nextStateKeys = Object.keys(nextState || {});
+    if (prevStateKeys.length !== nextStateKeys.length) {
+      ret = true;
+      console.warn(
+        'PureComponentDebug: different state keys',
+        tag,
+        prevStateKeys.filter(key => !nextStateKeys.includes(key)),
+        nextStateKeys.filter(key => !prevStateKeys.includes(key)),
+      );
+    }
+    for (const key in this.props) {
+      if (this.props[key] !== nextProps[key]) {
+        ret = true;
+        console.warn('PureComponentDebug: different prop values', tag, key);
+      }
+    }
+    for (const key in this.state) {
+      if (this.state[key] !== (nextState || {})[key]) {
+        ret = true;
+        console.warn('PureComponentDebug: different state values', tag, key);
+      }
+    }
+    return ret;
+  }
+}
+
+module.exports = PureComponentDebug;