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..192e76e0dd67 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 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. 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..9244ee34c03e --- /dev/null +++ b/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/ + ], + }); +}