[No QA] Implement Why Did You Render

.env.example

@@ -8,3 +8,4 @@ SECURE_NGROK_URL=https://secure-expensify-user.ngrok.io/
 NGROK_URL=https://expensify-user.ngrok.io/
 USE_NGROK=false
 USE_WEB_PROXY=false
+USE_WDYR=false

PERFORMANCE.md

@@ -24,6 +24,15 @@
 
 **Suggested:** [Deep Dive with the React DevTools creator](https://www.youtube.com/watch?v=nySib7ipZdk)
 
+### Why Did You Render?
+- Why Did You Render (WDYR) sends console notifications about potentially avoidable component re-renders.
+- It can also help to simply track when and why a certain component re-renders.
+- To enable it, set `USE_WDYR=true` in your `.env` file. 
+- You can add or exclude tracked components by their `displayName` in `wdyr.js`.
+- Open the browser console to see WDYR notifications.
+
+**Suggested** [Why Did You Render docs](https://github.com/welldone-software/why-did-you-render)
+
 ## Reconciliation
 
 React is pretty smart and in many cases is able to tell if something needs to update. The process by which React goes about updating the "tree" or view heirarchy is called reconciliation. If React thinks something needs to update it will render it again. React also assumes that if a parent component rendered then it's child should also re-render.

package.json

@@ -124,6 +124,7 @@
     "@testing-library/jest-native": "^3.4.2",
     "@testing-library/react-native": "^7.0.2",
     "@vercel/ncc": "^0.27.0",
+    "@welldone-software/why-did-you-render": "^6.2.0",
     "ajv-cli": "^5.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.2.2",

src/App.js

@@ -1,3 +1,4 @@
+import '../wdyr';
 import React from 'react';
 import {LogBox} from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';

wdyr.js

@@ -0,0 +1,30 @@
+// Implements Why Did You Render (WDYR) in Dev
+
+import React from 'react';
+import Config from 'react-native-config';
+import lodashGet from 'lodash/get';
+
+const useWDYR = lodashGet(Config, 'USE_WDYR') === 'true';
+
+if (useWDYR) {
+    const whyDidYouRender = require('@welldone-software/why-did-you-render');
+    whyDidYouRender(React, {
+        // Enable tracking in all pure components by default
+        trackAllPureComponents: true,
+
+        include: [
+            // Uncomment to enable tracking in all components. Must also uncomment /^Screen/ in exclude.
+            // /.*/,
+
+            // Uncomment to enable tracking by displayName, e.g.:
+            // /^Avatar/,
+            // /^ReportActionItem/,
+            // /^ReportActionItemSingle/,
+        ],
+
+        exclude: [
+            // Uncomment to enable tracking in all components
+            // /^Screen/
+        ],
+    });
+}