diff --git a/packages/webapp/package.json b/packages/webapp/package.json index 78ae9ec0..466dfd37 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -27,6 +27,7 @@ "@types/testing-library__cypress": "^5.0.8", "@typescript-eslint/eslint-plugin": "^5.41.0", "@typescript-eslint/parser": "^5.41.0", + "@welldone-software/why-did-you-render": "^7.0.1", "clean-webpack-plugin": "^3.0.05.10.11", "copy-webpack-plugin": "^7.0.0", "cypress": "^10.11.0", diff --git a/packages/webapp/src/index.tsx b/packages/webapp/src/index.tsx index 53b0e429..38dd6ad1 100644 --- a/packages/webapp/src/index.tsx +++ b/packages/webapp/src/index.tsx @@ -1,9 +1,11 @@ +import './wdyr'; // <--- first import + import React from 'react'; import App from './app'; import { createRoot } from 'react-dom/client'; async function bootstrapApplication() { - const container = document.getElementById('root') as HTMLElement + const container = document.getElementById('root') as HTMLElement; const root = createRoot(container!); root.render(); } diff --git a/packages/webapp/src/wdyr.ts b/packages/webapp/src/wdyr.ts new file mode 100644 index 00000000..7f519025 --- /dev/null +++ b/packages/webapp/src/wdyr.ts @@ -0,0 +1,15 @@ +/// + +import React from 'react'; + +if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line @typescript-eslint/no-var-requires + const whyDidYouRender = require('@welldone-software/why-did-you-render'); + if (process.env.NODE_ENV === 'development') { + whyDidYouRender(React, { + trackAllPureComponents: true, + trackHooks: true, + trackExtraHooks: [[require('react-redux/lib'), 'useSelector']], + }); + } +} diff --git a/yarn.lock b/yarn.lock index c6572a23..ae732bba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3531,6 +3531,13 @@ resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.7.0.tgz#e1993689ac42d2b16e9194376cfb6753f6254db1" integrity sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q== +"@welldone-software/why-did-you-render@^7.0.1": + version "7.0.1" + resolved "https://registry.yarnpkg.com/@welldone-software/why-did-you-render/-/why-did-you-render-7.0.1.tgz#09f487d84844bd8e66435843c2e0305702e61efb" + integrity sha512-Qe/8Xxa2G+LMdI6VoazescPzjjkHYduCDa8aHOJR50e9Bgs8ihkfMBY+ev7B4oc3N59Zm547Sgjf8h5y0FOyoA== + dependencies: + lodash "^4" + "@xtuc/ieee754@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790" @@ -9683,7 +9690,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ== -lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.7.0: +lodash@^4, lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==