implement wdyr

.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 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 Chrome Dev Tools 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,19 @@
+// 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', 'false') === 'true';
+
+if (useWDYR && process.env.NODE_ENV === 'development') {
+    const whyDidYouRender = require('@welldone-software/why-did-you-render');
+    whyDidYouRender(React, {
+        // Include and exclude components to be tracked by their displayName here
+        include: [
+            /^Avatar/,
+            /^ReportActionItemSingle/,
+        ],
+        exclude: [],
+    });
+}