Last active
June 30, 2025 19:38
-
-
Save zachhardesty7/8e63bd1c1097ad86b40bc6e0db6980e9 to your computer and use it in GitHub Desktop.
React: wdyr (why-did-you-render)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /// <reference types="@welldone-software/why-did-you-render" /> | |
| // ^ doesn't actually do anything in some projects? | |
| import React from "react"; | |
| // NOTE: add `import './__wdyr-18';` to top of your entry file (e.g. `index.tsx` or `App.tsx`) to enable WDYR | |
| // NOTE: to install the correct version for React 18, run `npm install @welldone-software/why-did-you-render@^8 --save-dev --save-exact` | |
| // https://github.com/welldone-software/why-did-you-render/tree/version-8 | |
| // https://github.com/welldone-software/why-did-you-render/tree/version-8#tracking-components | |
| // in short, for debugging what's causing rerenders... | |
| // track function components by adding the following after they're defined: | |
| // BigListPureComponent.whyDidYouRender = { logOnDifferentValues: true }; | |
| // or track class components by adding this property to the beginning of them: | |
| // static whyDidYouRender = { logOnDifferentValues: true }; | |
| // if you're just trying to optimize performance and only want to see "unnecessary" rerenders, you can flip `logOnDifferentValues` to `false` (the default), or just replace the whole object with `true` | |
| // TODO: see about methods of committing this to file to GitHub | |
| // TODO: consider checking `process.env.WDYR === 'true'` (requires adding `WDYR?: 'true' | 'false';` to env definition) | |
| if (process.env.NODE_ENV === "development") { | |
| // you could pass the type as a type parameter to `require<typeof import('@welldone-software/why-did-you-render').default>` if you correctly have `@types/webpack-env` installed | |
| // eslint-disable-next-line @typescript-eslint/no-var-requires | |
| const whyDidYouRender: typeof import("@welldone-software/why-did-you-render").default = require("@welldone-software/why-did-you-render"); | |
| whyDidYouRender(React, { | |
| collapseGroups: true, | |
| diffNameColor: "#E5C07B", | |
| diffPathColor: "#EF596F", | |
| titleColor: "#61AFEF", | |
| trackAllPureComponents: false, | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment