From c87440b533cf00b5421de9580fb515b90e51cb14 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 27 Jul 2021 16:13:52 -0600 Subject: [PATCH 1/6] implement wdyr --- .env.example | 1 + PERFORMANCE.md | 9 +++++++++ package-lock.json | 9 +++++++++ package.json | 1 + src/App.js | 1 + wdyr.js | 19 +++++++++++++++++++ 6 files changed, 40 insertions(+) create mode 100644 wdyr.js diff --git a/.env.example b/.env.example index ae2a5731de38..499a17fd916c 100644 --- a/.env.example +++ b/.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 diff --git a/PERFORMANCE.md b/PERFORMANCE.md index 2336b935b80d..008b11cec282 100644 --- a/PERFORMANCE.md +++ b/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. diff --git a/package-lock.json b/package-lock.json index 1ecb25cbdbb8..f92cc0731d9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15678,6 +15678,15 @@ "@xtuc/long": "4.2.2" } }, + "@welldone-software/why-did-you-render": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-6.2.0.tgz", + "integrity": "sha512-ViwaE09Vgb0yXzyZuGTWCmWy/nBRAEGyztMdFYuxIgmL8yoXX5TVMCfieiJGdRQQPiDUznlYmcu0lu8kN1lwtQ==", + "dev": true, + "requires": { + "lodash": "^4" + } + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", diff --git a/package.json b/package.json index d0fda054005b..520cc31afa53 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 3fd37312645e..3cb5cc9de904 100644 --- a/src/App.js +++ b/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'; diff --git a/wdyr.js b/wdyr.js new file mode 100644 index 000000000000..5a157fd840e1 --- /dev/null +++ b/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: [], + }); +} From cbbc75f69c21f0d26801f74ffae0e2ec3d1ba43d Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 27 Jul 2021 16:21:11 -0600 Subject: [PATCH 2/6] update readme --- PERFORMANCE.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/PERFORMANCE.md b/PERFORMANCE.md index 008b11cec282..192e76e0dd67 100644 --- a/PERFORMANCE.md +++ b/PERFORMANCE.md @@ -25,11 +25,11 @@ **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. +- 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 Chrome Dev Tools console to see WDYR notifications. +- Open the browser console to see WDYR notifications. **Suggested** [Why Did You Render docs](https://github.com/welldone-software/why-did-you-render) From 6edc03c58b111f90258a1bc634f4f0b82dbe0539 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 27 Jul 2021 16:23:46 -0600 Subject: [PATCH 3/6] add ReportActionItem --- wdyr.js | 1 + 1 file changed, 1 insertion(+) diff --git a/wdyr.js b/wdyr.js index 5a157fd840e1..fcb08afef107 100644 --- a/wdyr.js +++ b/wdyr.js @@ -12,6 +12,7 @@ if (useWDYR && process.env.NODE_ENV === 'development') { // Include and exclude components to be tracked by their displayName here include: [ /^Avatar/, + /^ReportActionItem/, /^ReportActionItemSingle/, ], exclude: [], From e756696437c7dcc59a2f0ded5053b3b615b788ec Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 28 Jul 2021 11:44:45 -0600 Subject: [PATCH 4/6] remove env check --- wdyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wdyr.js b/wdyr.js index fcb08afef107..003db24259cb 100644 --- a/wdyr.js +++ b/wdyr.js @@ -4,9 +4,9 @@ import React from 'react'; import Config from 'react-native-config'; import lodashGet from 'lodash/get'; -const useWDYR = lodashGet(Config, 'USE_WDYR', 'false') === 'true'; +const useWDYR = lodashGet(Config, 'USE_WDYR') === 'true'; -if (useWDYR && process.env.NODE_ENV === 'development') { +if (useWDYR) { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, { // Include and exclude components to be tracked by their displayName here From 14bfee9c5ec49a356a74ca338c5c69ca792f5ffe Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 28 Jul 2021 18:10:07 -0600 Subject: [PATCH 5/6] track all components by default --- wdyr.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/wdyr.js b/wdyr.js index 003db24259cb..8ada930c7025 100644 --- a/wdyr.js +++ b/wdyr.js @@ -9,12 +9,15 @@ const useWDYR = lodashGet(Config, 'USE_WDYR') === 'true'; if (useWDYR) { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, { - // Include and exclude components to be tracked by their displayName here - include: [ - /^Avatar/, - /^ReportActionItem/, - /^ReportActionItemSingle/, - ], - exclude: [], + // Tracks all components by default + trackAllPureComponents: true, + + // Uncomment below to include/exclude components to be tracked by their displayName + // include: [ + // /^Avatar/, + // /^ReportActionItem/, + // /^ReportActionItemSingle/, + // ], + // exclude: [], }); } From 901acd27eec65b6c9138a6811b5dff7876b3cf01 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 2 Aug 2021 13:32:45 -0600 Subject: [PATCH 6/6] change defaults --- wdyr.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/wdyr.js b/wdyr.js index 8ada930c7025..9244ee34c03e 100644 --- a/wdyr.js +++ b/wdyr.js @@ -9,15 +9,22 @@ const useWDYR = lodashGet(Config, 'USE_WDYR') === 'true'; if (useWDYR) { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, { - // Tracks all components by default + // Enable tracking in all pure components by default trackAllPureComponents: true, - // Uncomment below to include/exclude components to be tracked by their displayName - // include: [ - // /^Avatar/, - // /^ReportActionItem/, - // /^ReportActionItemSingle/, - // ], - // exclude: [], + 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/ + ], }); }