\n );\n });\n ComponentWithNewResultsForDeepEqualsDeps.displayName = 'ComponentWithNewResultsForDeepEqualsDeps';\n\n function Main() {\n const [count, setCount] = React.useState(0);\n\n return (\n \n setCount(count + 1)}>\n Current count: {count}\n \n \n \n
\n );\n }\n\n Main.displayName = 'Main';\n\n reactDomRoot.render(\n
current count: {state.count}
\n
\n
dispatch({\n type: 'broken-set-count',\n payload: {count: inputRef.current.value},\n })}\n >\n broken set count\n \n dispatch({\n type: 'set-count',\n payload: {count: inputRef.current.value},\n })}\n >\n correct set count\n \n console.clear()}>clear console \n {'Will cause a re-render since {num: 0} !== {num: 0}'}
\n setNumObj({num: 0})}>\n Will Cause a Re-render: {numObj.num}\n \n \n );\n }\n BrokenHooksComponent.whyDidYouRender = true;\n\n const BrokenHooksPureComponent = React.memo(BrokenHooksComponent);\n BrokenHooksPureComponent.displayName = 'BrokenHooksPureComponent';\n BrokenHooksPureComponent.whyDidYouRender = true;\n\n function CorrectHooksComponent() {\n console.log('render CorrectHooksComponent');\n const [num, setNum] = React.useState(0);\n return (\n <>\n {'Will NOT cause a re-render since 0 === 0'}
\n setNum(0)}>\n Will NOT Cause a Re-render: {num}\n \n \n );\n }\n CorrectHooksComponent.whyDidYouRender = true;\n\n function useNumState(defState) {\n const [state, setState] = React.useState(defState);\n\n function smartSetState(newState) {\n if (state.num !== newState.num) {\n setState(newState);\n }\n }\n\n return [state, smartSetState];\n }\n\n function SmartHooksComponent() {\n console.log('render SmartHooksComponent');\n const [numObj, setNumObj] = useNumState({num: 0});\n return (\n <>\n {'Will NOT cause a re-render setState won\\'t be called'}
\n setNumObj({num: 0})}>\n Will NOT Cause a Re-render: {numObj.num}\n \n \n );\n }\n SmartHooksComponent.whyDidYouRender = true;\n\n function Main() {\n return (\n \n BrokenHooksPureComponent\n
\n );\n }\n\n reactDomRoot.render(\n
{text} \n {children}\n \n);\n\nDemoComponent.whyDidYouRender = true;\n\nexport default {\n description: 'React Hot Reload Of Tracked Component',\n fn({reactDomRoot, whyDidYouRender}) {\n const stepLogger = createStepLogger();\n\n whyDidYouRender(React);\n\n stepLogger('initial render');\n reactDomRoot.render(yo! );\n\n stepLogger('render with same props', true);\n reactDomRoot.render(yo! );\n },\n};\n"
},
{
"path": "demo/src/index.js",
"content": "import React from 'react';\nimport ReactDom from 'react-dom/client';\n\nimport App from './App';\n\nconst element = document.getElementById('menu');\n\nconst root = ReactDom.createRoot(element);\n\nroot.render(State And Props The Same
;\n }\n }\n\n stepLogger('First Render');\n reactDomRoot.render(Props Changes
\n );\n ClassDemo.whyDidYouRender = true;\n\n const Main = props => (\n \n \n );\n\n stepLogger('First render');\n reactDomRoot.render(\n {`{a.b} is: ${a.b}`}\n dispatch({type: 'sameObj'})}>Same State \n dispatch({type: 'deepEqlObj'})}>Deep Equal State \n dispatch({type: 'randomObj'})}>Random Object \n
\n );\n };\n\n ConnectedSimpleComponent.whyDidYouRender = true;\n\n const initialState = {a: {b: 'c'}};\n const store = createStore((state = initialState, action) => {\n if (action.type === 'randomObj') {\n return {a: {b: `${Math.random()}`}};\n }\n if (action.type === 'deepEqlObj') {\n return _.cloneDeep(state);\n }\n return state;\n });\n\n const Main = () => (\n \n \n );\n\n reactDomRoot.render(\n {`{a.b} is: ${a.b}`}\n Same State \n Deep Equal State \n Random Object \n
\n );\n };\n\n const ConnectedSimpleComponent = connect(\n state => ({a: state.a}),\n ({\n randomObj: () => ({type: 'randomObj'}),\n deepEqlObj: () => ({type: 'deepEqlObj'}),\n sameObj: () => ({type: 'sameObj'}),\n })\n )(SimpleComponent);\n\n SimpleComponent.whyDidYouRender = true;\n\n const Main = () => (\n \n \n );\n\n reactDomRoot.render(Special Changes
;\n }\n }\n\n stepLogger('First render');\n reactDomRoot.render(\n hi!}\n />\n );\n\n stepLogger('Same special props', true);\n reactDomRoot.render(\n hi!}\n />\n );\n },\n};\n"
},
{
"path": "demo/src/ssr/DemoComponent.js",
"content": "const React = require('react');\nconst createReactClass = require('create-react-class');\n\nconst DemoComponent = createReactClass({\n displayName: 'DemoComponent',\n render() {\n return React.createElement('div', {}, this.props.text);\n },\n});\n\nDemoComponent.whyDidYouRender = true;\n\nmodule.exports = DemoComponent;\n"
},
{
"path": "demo/src/ssr/index.js",
"content": "import React from 'react';\nimport ReactDom from 'react-dom/client';\n\nimport createStepLogger from '../createStepLogger';\n\nimport DemoComponent from './DemoComponent';\n\nexport default {\n description: 'Server Side (hydrate)',\n fn({domElement, whyDidYouRender}) {\n const stepLogger = createStepLogger();\n\n return fetch('/ssrComponent')\n .then(response => response.text())\n .then(initialDemoHTML => {\n domElement.innerHTML = initialDemoHTML;\n\n whyDidYouRender(React);\n\n stepLogger('hydrate');\n const hydratedRoot = ReactDom.hydrateRoot(domElement, State Changes
;\n }\n }\n\n stepLogger('First Render');\n reactDomRoot.render();\n },\n};\n"
},
{
"path": "demo/src/strict/index.js",
"content": "import React from 'react';\n\nimport createStepLogger from '../createStepLogger';\n\nexport default {\n description: 'Strict mode',\n fn({reactDomRoot, whyDidYouRender}) {\n const stepLogger = createStepLogger();\n\n whyDidYouRender(React);\n\n class ClassDemo extends React.Component {\n static whyDidYouRender = true;\n render() {\n return Props Changes
;\n }\n }\n\n const Main = props => (\n \n \n );\n\n stepLogger('First render');\n reactDomRoot.render(\n styled-components\n
\n );\n };\n\n const StyledSimpleComponent = styled(SimpleComponent)`\n background-color: #ff96ae;\n font-style: italic;\n `;\n\n StyledSimpleComponent.whyDidYouRender = true;\n\n const Main = () => (\n \n );\n\n reactDomRoot.render(/jestSetup.js',\n ],\n moduleNameMapper: {\n '~(.*)$': '/src$1',\n '^@welldone-software/why-did-you-render$': '/src/whyDidYouRender.js',\n },\n testEnvironment: 'jsdom',\n extensionsToTreatAsEsm: ['.ts', '.tsx'],\n};\n"
},
{
"path": "jest.polyfills.js",
"content": "// jest.polyfills.js\n/**\n * @note The block below contains polyfills for Node.js globals\n * required for Jest to function when running JSDOM tests.\n * These HAVE to be require's and HAVE to be in this exact\n * order, since \"undici\" depends on the \"TextEncoder\" global API.\n *\n * Consider migrating to a more modern test runner if\n * you don't want to deal with this.\n */\n \nconst {TextDecoder, TextEncoder} = require('node:util');\n \nObject.defineProperties(globalThis, {\n TextDecoder: {value: TextDecoder},\n TextEncoder: {value: TextEncoder},\n});\n \nconst {Blob, File} = require('node:buffer'); \n \nObject.defineProperties(globalThis, {\n Blob: {value: Blob},\n File: {value: File},\n});\n\nwindow.MessageChannel = jest.fn().mockImplementation(() => {\n let onmessage;\n return {\n port1: {\n set onmessage(cb) {\n onmessage = cb;\n },\n },\n port2: {\n postMessage: data => {\n if (onmessage) {\n onmessage({data});\n }\n },\n },\n };\n});\n"
},
{
"path": "jestSetup.js",
"content": "import {errorOnConsoleOutput} from '@welldone-software/jest-console-handler';\n\nconst substringsToIgnore = [\n 'Selectors that return the entire state are almost certainly a mistake',\n 'Warning: ReactDOM.render is no longer supported in React 19',\n 'Support for defaultProps will be removed from',\n];\nconst regexToIgnore = new RegExp(`(${substringsToIgnore.join('|')})`);\n\nglobal.flushConsoleOutput = errorOnConsoleOutput({filterEntries: ({args}) => {\n const shouldIgnoreConsoleLog = regexToIgnore.test(args[0]);\n return !shouldIgnoreConsoleLog;\n}});\n\nconst React = require('react');\nif (!React.version.startsWith('19')) {\n throw new Error(`Wrong React version. Expected ^19, got ${React.version}`);\n}\n"
},
{
"path": "jsx-dev-runtime.d.ts",
"content": "import './types.d.ts';\n"
},
{
"path": "jsx-dev-runtime.js",
"content": "/* eslint-disable*/\nvar jsxDevRuntime = require('react/jsx-dev-runtime')\nvar WDYR = require('@welldone-software/why-did-you-render')\n\nvar origJsxDev = jsxDevRuntime.jsxDEV\nvar wdyrStore = WDYR.wdyrStore\n\nmodule.exports = {\n ...jsxDevRuntime,\n jsxDEV(...args) {\n if (wdyrStore.React && wdyrStore.React.__IS_WDYR__) {\n var origType = args[0]\n var rest = args.slice(1)\n \n var WDYRType = WDYR.getWDYRType(origType)\n if (WDYRType) {\n try {\n wdyrStore.ownerBeforeElementCreation = WDYR.getCurrentOwner();\n var element = origJsxDev.apply(null, [WDYRType].concat(rest))\n if (wdyrStore.options.logOwnerReasons) {\n WDYR.storeOwnerData(element)\n }\n return element\n } catch(e) {\n wdyrStore.options.consoleLog('whyDidYouRender JSX transform error. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.', {\n errorInfo: {\n error: e,\n componentNameOrComponent: origType,\n rest: rest,\n options: wdyrStore.options\n }\n })\n }\n }\n }\n \n return origJsxDev.apply(null, args)\n }\n};\n"
},
{
"path": "jsx-runtime.d.ts",
"content": "import './types.d.ts';\n"
},
{
"path": "jsx-runtime.js",
"content": "module.exports = require('react/jsx-runtime');\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"@welldone-software/why-did-you-render\",\n \"description\": \"Monkey patches React to notify you about avoidable re-renders.\",\n \"version\": \"10.0.1\",\n \"repository\": \"git+https://github.com/welldone-software/why-did-you-render.git\",\n \"license\": \"MIT\",\n \"authors\": [\n \"Vitali Zaidman (https://github.com/vzaidman)\"\n ],\n \"types\": \"types.d.ts\",\n \"main\": \"dist/whyDidYouRender.js\",\n \"files\": [\n \"dist\",\n \"types.d.ts\",\n \"jsx-runtime.js\",\n \"jsx-runtime.d.ts\",\n \"jsx-dev-runtime.js\",\n \"jsx-dev-runtime.d.ts\"\n ],\n \"keywords\": [\n \"react\",\n \"component\",\n \"pure\",\n \"performance\",\n \"render\",\n \"update\",\n \"tool\"\n ],\n \"scripts\": {\n \"start\": \"cross-env PORT=3003 NODE_ENV=development node demo/serve\",\n \"build\": \"cross-env NODE_ENV=production rollup --config --bundleConfigAsCjs\",\n \"test\": \"jest --config=jest.config.js\",\n \"test:ci\": \"yarn test --coverage\",\n \"lint\": \"eslint . --max-warnings 0 --cache --cache-location .cache/eslint-cache\",\n \"clear\": \"rimraf .cache dist demo/dist node_modules\",\n \"watch\": \"concurrently --names \\\"Serve,Test\\\" \\\"npm:start\\\" \\\"npm:test:watch\\\"\",\n \"checkHealth\": \"yarn build && yarn lint && yarn test && yarn cypress:test\",\n \"version\": \"yarn checkHealth\",\n \"postversion\": \"git push && git push --tags\",\n \"cypress:open\": \"cypress open\",\n \"cypress:run\": \"cypress run --browser chrome\",\n \"cypress:test\": \"start-server-and-test start http://localhost:3003 cypress:run\"\n },\n \"comments\": {\n \"how to\": {\n \"bump version\": \"npm version major/minor/patch\"\n },\n \"resolutions\": {\n \"source-map@^0.7.4\": [\n \"fixes https://github.com/mozilla/source-map/issues/432 or we get:\",\n \"forces nollup to use source-map 0.8.0-beta.0 or higher.\",\n \"will be resolved when nollup is updated to use it\"\n ],\n \"rollup-plugin-react-refresh\": [\n \"Uses my forked github https://github.com/vzaidman/rollup-plugin-react-refresh\",\n \"Until the PR from that is merged to the official library https://github.com/PepsRyuu/rollup-plugin-react-refresh/pull/10\"\n ]\n }\n },\n \"dependencies\": {\n \"lodash\": \"^4\"\n },\n \"peerDependencies\": {\n \"react\": \"^19\"\n },\n \"resolutions\": {\n \"source-map-fast\": \"npm:source-map@^0.8.0-beta.0\",\n \"source-map\": \"^0.8.0-beta.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.26.0\",\n \"@babel/preset-env\": \"^7.26.0\",\n \"@babel/preset-react\": \"^7.26.3\",\n \"@eslint/compat\": \"^1.2.4\",\n \"@rollup/plugin-alias\": \"^5.1.1\",\n \"@rollup/plugin-babel\": \"^6.0.4\",\n \"@rollup/plugin-commonjs\": \"^28.0.2\",\n \"@rollup/plugin-node-resolve\": \"^16.0.0\",\n \"@rollup/plugin-replace\": \"^6.0.2\",\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/jest-dom\": \"^6.6.3\",\n \"@testing-library/react\": \"^16.1.0\",\n \"@types/jest\": \"^29.5.14\",\n \"@types/react\": \"^19.0.2\",\n \"@types/react-dom\": \"^19.0.2\",\n \"@types/react-redux\": \"^7.1.34\",\n \"@welldone-software/jest-console-handler\": \"^2.0.1\",\n \"acorn-walk\": \"^8.3.4\",\n \"astring\": \"^1.9.0\",\n \"babel-core\": \"^7.0.0-bridge.0\",\n \"babel-jest\": \"^29.7.0\",\n \"concurrently\": \"^9.1.1\",\n \"create-react-class\": \"^15.7.0\",\n \"cross-env\": \"^7.0.3\",\n \"cypress\": \"^13.17.0\",\n \"eslint\": \"^9.17.0\",\n \"eslint-plugin-cypress\": \"^4.1.0\",\n \"eslint-plugin-jest\": \"^28.10.0\",\n \"eslint-plugin-react\": \"^7.37.3\",\n \"express\": \"^4.21.2\",\n \"express-history-api-fallback\": \"^2.2.1\",\n \"husky\": \"^9.1.7\",\n \"jest\": \"^29.7.0\",\n \"jest-cli\": \"^29.7.0\",\n \"jest-environment-jsdom\": \"^29.7.0\",\n \"nollup\": \"^0.21.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"react-is\": \"^19.0.0\",\n \"react-redux\": \"^9.2.0\",\n \"react-refresh\": \"^0.16.0\",\n \"react-router-dom\": \"^7.1.1\",\n \"redux\": \"^5.0.1\",\n \"rimraf\": \"^6.0.1\",\n \"rollup\": \"^4.29.1\",\n \"rollup-plugin-alias\": \"^2.2.0\",\n \"rollup-plugin-commonjs-alternate\": \"^0.8.0\",\n \"rollup-plugin-license\": \"^3.5.3\",\n \"rollup-plugin-node-resolve\": \"^5.2.0\",\n \"rollup-plugin-react-refresh\": \"https://github.com/vzaidman/rollup-plugin-react-refresh.git#5c2f09bc28dbb8ab711b7d095f61fbc8d295fcd6\",\n \"source-map\": \"npm:source-map@^0.8.0-beta.0\",\n \"start-server-and-test\": \"^2.0.9\",\n \"styled-components\": \"^6.1.13\",\n \"typescript\": \"^5.7.2\"\n }\n}"
},
{
"path": "rollup.config.js",
"content": "import fs from 'fs';\nimport resolve from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\nimport babel from '@rollup/plugin-babel';\nimport license from 'rollup-plugin-license';\n\nconst loadJSON = (path) => JSON.parse(fs.readFileSync(new URL(path, import.meta.url)));\n\nconst pkg = loadJSON('./package.json');\n\nconst banner = `\n<%= pkg.name %> <%= pkg.version %>\nMIT Licensed \nGenerated by <%= pkg.authors[0] %>\nGenerated at <%= moment().format('YYYY-MM-DD') %>\n`;\n\nexport default [\n {\n input: 'src/index.js',\n external: ['lodash', 'react'],\n output: [\n {\n name: 'whyDidYouRender',\n file: pkg.main,\n format: 'umd',\n sourcemap: true,\n exports: 'default',\n globals: {\n lodash: 'lodash',\n react: 'react',\n },\n },\n ],\n plugins: [\n babel({\n exclude: 'node_modules/**',\n babelHelpers: 'bundled',\n }),\n resolve(),\n commonjs(),\n license({\n sourcemap: true,\n banner,\n }),\n ],\n },\n];\n"
},
{
"path": "src/calculateDeepEqualDiffs.js",
"content": "import {\n isArray,\n isPlainObject,\n isDate,\n isRegExp,\n isError,\n isFunction,\n isSet,\n has,\n uniq,\n} from 'lodash';\n\nimport {diffTypes} from './consts';\n\nconst hasElementType = typeof Element !== 'undefined';\n\n// copied from https://github.com/facebook/react/blob/fc5ef50da8e975a569622d477f1fed54cb8b193d/packages/react-devtools-shared/src/backend/shared/ReactSymbols.js#L26\nconst hasSymbol = typeof Symbol === 'function' && Symbol.for;\n\nconst LEGACY_ELEMENT_NUMBER = 0xeac7;\nconst LEGACY_ELEMENT_SYMBOL_STRING = hasSymbol && Symbol.for('react.element');\nconst ELEMENT_SYMBOL_STRING = hasSymbol && Symbol.for('react.transitional.element');\nconst isReactElement = object => [\n ...(hasSymbol ? [ELEMENT_SYMBOL_STRING, LEGACY_ELEMENT_SYMBOL_STRING] : []),\n LEGACY_ELEMENT_NUMBER,\n].includes(object.$$typeof);\n// end\n\nfunction trackDiff(a, b, diffsAccumulator, pathString, diffType) {\n diffsAccumulator.push({\n diffType,\n pathString,\n prevValue: a,\n nextValue: b,\n });\n return diffType !== diffTypes.different;\n}\n\nfunction isGetter(obj, prop) {\n return !!Object.getOwnPropertyDescriptor(obj, prop)['get'];\n}\n\nexport const dependenciesMap = new WeakMap();\n\nfunction accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {detailed}) {\n if (a === b) {\n if (detailed) {\n trackDiff(a, b, diffsAccumulator, pathString, diffTypes.same);\n }\n return true;\n }\n\n if (!a || !b) {\n return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);\n }\n\n if (isArray(a) && isArray(b)) {\n const arrayLength = a.length;\n if (arrayLength !== b.length) {\n return trackDiff([...a], [...b], diffsAccumulator, pathString, diffTypes.different);\n }\n\n const arrayItemDiffs = [];\n let numberOfDeepEqualsItems = 0;\n for (let i = arrayLength; i--; i > 0) {\n const diffEquals = accumulateDeepEqualDiffs(a[i], b[i], arrayItemDiffs, `${pathString}[${i}]`, {detailed});\n if (diffEquals) {\n numberOfDeepEqualsItems++;\n }\n }\n\n if (detailed || numberOfDeepEqualsItems !== arrayLength) {\n diffsAccumulator.push(...arrayItemDiffs);\n }\n\n if (numberOfDeepEqualsItems === arrayLength) {\n return trackDiff([...a], [...b], diffsAccumulator, pathString, diffTypes.deepEquals);\n }\n\n return trackDiff([...a], [...b], diffsAccumulator, pathString, diffTypes.different);\n }\n\n if (isSet(a) && isSet(b)) {\n if (a.size !== b.size) {\n return trackDiff(new Set(a), new Set(b), diffsAccumulator, pathString, diffTypes.different);\n }\n\n for (const valA of a) {\n if (!b.has(valA)) {\n return trackDiff(new Set(a), new Set(b), diffsAccumulator, pathString, diffTypes.different);\n }\n }\n\n return trackDiff(new Set(a), new Set(b), diffsAccumulator, pathString, diffTypes.deepEquals);\n }\n\n if (isDate(a) && isDate(b)) {\n return a.getTime() === b.getTime() ?\n trackDiff(new Date(a), new Date(b), diffsAccumulator, pathString, diffTypes.date) :\n trackDiff(new Date(a), new Date(b), diffsAccumulator, pathString, diffTypes.different);\n }\n\n if (isRegExp(a) && isRegExp(b)) {\n return a.toString() === b.toString() ?\n trackDiff(a, b, diffsAccumulator, pathString, diffTypes.regex) :\n trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);\n }\n\n if (hasElementType && a instanceof Element && b instanceof Element) {\n return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);\n }\n\n if (isReactElement(a) && isReactElement(b)) {\n if (a.type !== b.type) {\n return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);\n }\n\n const reactElementPropsAreDeepEqual =\n accumulateDeepEqualDiffs(a.props, b.props, [], `${pathString}.props`, {detailed});\n\n return reactElementPropsAreDeepEqual ?\n trackDiff(a, b, diffsAccumulator, pathString, diffTypes.reactElement) :\n trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);\n }\n\n if (isFunction(a) && isFunction(b)) {\n if (a.name !== b.name) {\n return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);\n }\n\n const aDependenciesObj = dependenciesMap.get(a);\n const bDependenciesObj = dependenciesMap.get(b);\n\n if (aDependenciesObj && bDependenciesObj) {\n const dependenciesAreDeepEqual =\n accumulateDeepEqualDiffs(aDependenciesObj.deps, bDependenciesObj.deps, diffsAccumulator, `${pathString}:parent-hook-${aDependenciesObj.hookName}-deps`, {detailed});\n\n return dependenciesAreDeepEqual ?\n trackDiff(a, b, diffsAccumulator, pathString, diffTypes.function) :\n trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);\n }\n\n return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.function);\n }\n\n if (typeof a === 'object' && typeof b === 'object' && Object.getPrototypeOf(a) === Object.getPrototypeOf(b)) {\n const aKeys = Object.getOwnPropertyNames(a);\n const bKeys = Object.getOwnPropertyNames(b);\n \n const allKeys = uniq([...aKeys, ...bKeys]);\n\n const clonedA = isPlainObject(a) ? {...a} : a;\n const clonedB = isPlainObject(b) ? {...b} : b;\n\n if (allKeys.length !== aKeys.length || allKeys.length !== bKeys.length) {\n return trackDiff(clonedA, clonedB, diffsAccumulator, pathString, diffTypes.different);\n }\n\n const relevantKeys = allKeys.filter(key => {\n // do not compare the stack as it differ even though the errors are identical.\n if (key === 'stack' && isError(a)) {\n return false;\n }\n\n // getters checking is causing too much problems because of how it's used in js.\n // not only getters can throw errors, they also cause side effects in many cases.\n if (isGetter(a, key)) {\n return false;\n }\n\n return true;\n });\n\n const keysLength = relevantKeys.length;\n\n for (let i = keysLength; i--; i > 0) {\n if (!has(b, relevantKeys[i])) {\n return trackDiff(clonedA, clonedB, diffsAccumulator, pathString, diffTypes.different);\n }\n }\n\n const objectValuesDiffs = [];\n let numberOfDeepEqualsObjectValues = 0;\n for (let i = keysLength; i--; i > 0) {\n const key = relevantKeys[i];\n const deepEquals = accumulateDeepEqualDiffs(a[key], b[key], objectValuesDiffs, `${pathString}.${key}`, {detailed});\n if (deepEquals) {\n numberOfDeepEqualsObjectValues++;\n }\n }\n\n if (detailed || numberOfDeepEqualsObjectValues !== keysLength) {\n diffsAccumulator.push(...objectValuesDiffs);\n }\n\n if (numberOfDeepEqualsObjectValues === keysLength) {\n return trackDiff(clonedA, clonedB, diffsAccumulator, pathString, diffTypes.deepEquals);\n }\n\n return trackDiff(clonedA, clonedB, diffsAccumulator, pathString, diffTypes.different);\n }\n\n return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);\n}\n\nexport default function calculateDeepEqualDiffs(a, b, initialPathString, {detailed = false} = {}) {\n try {\n const diffs = [];\n accumulateDeepEqualDiffs(a, b, diffs, initialPathString, {detailed});\n return diffs;\n } catch (error) {\n if ((error.message && error.message.match(/stack|recursion/i)) || (error.number === -2146828260)) {\n // warn on circular references, don't crash.\n // browsers throw different errors name and messages:\n // chrome/safari: \"RangeError\", \"Maximum call stack size exceeded\"\n // firefox: \"InternalError\", too much recursion\"\n // edge: \"Error\", \"Out of stack space\"\n // eslint-disable-next-line no-console\n console.warn('Warning: why-did-you-render couldn\\'t handle circular references in props.', error.name, error.message);\n return false;\n }\n throw error;\n }\n}\n"
},
{
"path": "src/consts.js",
"content": "export const diffTypes = {\n 'different': 'different',\n 'deepEquals': 'deepEquals',\n 'date': 'date',\n 'regex': 'regex',\n 'reactElement': 'reactElement',\n 'function': 'function',\n 'same': 'same',\n};\n\nexport const diffTypesDescriptions = {\n [diffTypes.different]: 'different objects',\n [diffTypes.deepEquals]: 'different objects that are equal by value',\n [diffTypes.date]: 'different date objects with the same value',\n [diffTypes.regex]: 'different regular expressions with the same value',\n [diffTypes.reactElement]: 'different React elements (remember that the hi!
;\n\n const prevValue = {a: tooltip};\n const nextValue = {a: tooltip};\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n});\n\ntest('simple react elements', () => {\n const tooltip = hi!
;\n const tooltip2 = hi!
;\n\n const diffs = calculateDeepEqualDiffs(tooltip, tooltip2);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue: tooltip,\n nextValue: tooltip2,\n diffType: diffTypes.reactElement,\n },\n ]);\n});\n\ntest('nested react elements', () => {\n const tooltip = hi!
;\n const tooltip2 = hi!
;\n\n const prevValue = {a: tooltip};\n const nextValue = {a: tooltip2};\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n});\n\ntest('nested different react elements', () => {\n const tooltip = hi!
;\n const tooltip2 = hi 2 !
;\n\n const prevValue = {a: tooltip};\n const nextValue = {a: tooltip2};\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '.a',\n prevValue: tooltip,\n nextValue: tooltip2,\n diffType: diffTypes.different,\n },\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.different,\n },\n ]);\n});\n\ntest('nested different react elements with several children', () => {\n const prevValue = ;\n const nextValue = ;\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.different,\n },\n ]);\n});\n\ntest('nested different react elements with several children with keys', () => {\n const prevValue = ;\n const nextValue = ;\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.different,\n },\n ]);\n});\n\ntest('react class component instance', () => {\n class MyComponent extends React.Component {\n render() {\n return hi!
;\n }\n }\n\n const tooltip = hi!
;\n }\n }\n\n const tooltip = hi!
\n );\n\n const tooltip = hi!
\n ));\n\n const tooltip = ;\n const tooltip2 = ;\n\n const prevValue = {a: tooltip};\n const nextValue = {a: tooltip2};\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n});\n\ntest('functions', () => {\n const fn = function something() {};\n const fn2 = function something() {};\n\n const prevValue = {fn};\n const nextValue = {fn: fn2};\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n});\n\ntest('inline functions', () => {\n const prevValue = {a: {fn: () => {}}};\n const nextValue = {a: {fn: () => {}}};\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n});\n\ntest('sets', () => {\n const prevValue = {\n a: new Set(['a']),\n b: new Set(['a', 1]),\n c: new Set(['a', 1]),\n };\n\n const nextValue = {\n a: new Set(['a']),\n b: new Set(['a', 2]),\n c: new Set(['a', 1, 'c']),\n };\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n expect(diffs).toEqual([\n {\n pathString: '.c',\n prevValue: prevValue.c,\n nextValue: nextValue.c,\n diffType: diffTypes.different,\n },\n {\n pathString: '.b',\n prevValue: prevValue.b,\n nextValue: nextValue.b,\n diffType: diffTypes.different,\n },\n {\n pathString: '.a',\n prevValue: prevValue.a,\n nextValue: nextValue.a,\n diffType: diffTypes.deepEquals,\n },\n {\n pathString: '',\n prevValue: prevValue,\n nextValue: nextValue,\n diffType: diffTypes.different,\n },\n ]);\n});\n\ntest('mix', () => {\n const prevValue = {a: {fn: () => {}}, b: [{tooltip: hi
}]};\n const nextValue = {a: {fn: () => {}}, b: [{tooltip: hi
}]};\n\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n});\ndescribe('calculateDeepEqualDiffs - Errors', () => {\n test('Equal Native Errors', () => {\n const prevValue = new Error('message');\n const nextValue = new Error('message');\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n });\n \n test('Different Native Errors', () => {\n const prevValue = new Error('message');\n const nextValue = new Error('Second message');\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n expect(diffs).toEqual([\n {\n pathString: '.message',\n prevValue: 'message',\n nextValue: 'Second message',\n diffType: diffTypes.different,\n },\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.different,\n },\n ]);\n });\n\n test('Equal Custom Errors', () => {\n class CustomError extends Error {\n constructor(message, code) {\n super(message);\n this.name = 'ValidationError';\n this.code = code;\n }\n }\n\n const prevValue = new CustomError('message', 1001);\n const nextValue = new CustomError('message', 1001);\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n });\n\n test('Different Custom Errors', () => {\n class CustomError extends Error {\n constructor(message, code) {\n super(message);\n this.name = 'ValidationError';\n this.code = code;\n }\n }\n\n const prevValue = new CustomError('message', 1001);\n const nextValue = new CustomError('message', 1002);\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n expect(diffs).toEqual([\n {\n pathString: '.code',\n prevValue: 1001,\n nextValue: 1002,\n diffType: diffTypes.different,\n },\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.different,\n },\n ]);\n });\n});\n\n\ntest('Equal class instances', () => {\n class Person {\n constructor(name) {\n this.name = name;\n }\n }\n \n const prevValue = new Person('Jon Snow');\n const nextValue = new Person('Jon Snow');\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n expect(diffs).toEqual([\n {\n pathString: '',\n prevValue,\n nextValue,\n diffType: diffTypes.deepEquals,\n },\n ]);\n});\n\ntest('Different class instances', () => {\n class Person {\n constructor(name) {\n this.name = name;\n }\n }\n \n const prevValue = new Person('Jon Snow');\n const nextValue = new Person('Aria Stark');\n const diffs = calculateDeepEqualDiffs(prevValue, nextValue);\n expect(diffs).toEqual([\n {\n pathString: '.name',\n prevValue: 'Jon Snow',\n nextValue: 'Aria Stark',\n diffType: diffTypes.different,\n },\n {\n pathString: '',\n prevValue: {\n name: 'Jon Snow',\n },\n nextValue: {\n name: 'Aria Stark',\n },\n diffType: diffTypes.different,\n },\n ]);\n});\n"
},
{
"path": "tests/defaultNotifier.test.js",
"content": "import React from 'react';\n\nimport defaultNotifier from '~/defaultNotifier';\nimport getUpdateInfo from '~/getUpdateInfo';\nimport whyDidYouRender from '~';\n\nclass TestComponent extends React.Component {\n static whyDidYouRender = true;\n render() {\n return hi!
;\n }\n}\n\nconst testInputAndExpects = {\n default: {\n description: 'Group by component (default options)',\n userOptions: undefined,\n expects: {\n logsCount: {\n title: 0,\n emptyValues: 1,\n changedObjects: 2,\n changedObjectValues: 3,\n changedObjectValuesDeepEquals: 4,\n },\n groupLogsCount: {\n title: 1,\n emptyValues: 0,\n changedObjects: 0,\n changedObjectValues: 1,\n changedObjectValuesDeepEquals: 1,\n },\n groupCollapsedLogsCount: {\n title: 0,\n emptyValues: 0,\n changedObjects: 0,\n changedObjectValues: 0,\n changedObjectValuesDeepEquals: 0,\n },\n },\n },\n onlyLogs: {\n description: 'Only logs',\n userOptions: {onlyLogs: true},\n expects: {\n logsCount: {\n title: 1,\n emptyValues: 1,\n changedObjects: 2,\n changedObjectValues: 4,\n changedObjectValuesDeepEquals: 5,\n },\n groupLogsCount: {\n title: 0,\n emptyValues: 0,\n changedObjects: 0,\n changedObjectValues: 0,\n changedObjectValuesDeepEquals: 0,\n },\n groupCollapsedLogsCount: {\n title: 0,\n emptyValues: 0,\n changedObjects: 0,\n changedObjectValues: 0,\n changedObjectValuesDeepEquals: 0,\n },\n },\n },\n collapseGroups: {\n description: 'Group by component with collapse',\n userOptions: {collapseGroups: true},\n expects: {\n logsCount: {\n title: 0,\n emptyValues: 1,\n changedObjects: 2,\n changedObjectValues: 3,\n changedObjectValuesDeepEquals: 4,\n },\n groupLogsCount: {\n title: 0,\n emptyValues: 0,\n changedObjects: 0,\n changedObjectValues: 0,\n changedObjectValuesDeepEquals: 0,\n },\n groupCollapsedLogsCount: {\n title: 1,\n emptyValues: 0,\n changedObjects: 0,\n changedObjectValues: 1,\n changedObjectValuesDeepEquals: 1,\n },\n },\n },\n};\n\nfunction calculateNumberOfExpectedLogs(expectedLogTypes, expectedCounts) {\n return expectedLogTypes.reduce((sum, type) => sum + expectedCounts[type], 0);\n}\n\nfunction expectLogTypes(expectedLogTypes, expects) {\n const consoleOutputs = flushConsoleOutput();\n\n expect(consoleOutputs.filter(o => o.level === 'log'))\n .toHaveLength(calculateNumberOfExpectedLogs(expectedLogTypes, expects.logsCount));\n\n expect(consoleOutputs.filter(o => o.level === 'group'))\n .toHaveLength(calculateNumberOfExpectedLogs(expectedLogTypes, expects.groupLogsCount));\n\n expect(consoleOutputs.filter(o => o.level === 'groupCollapsed'))\n .toHaveLength(calculateNumberOfExpectedLogs(expectedLogTypes, expects.groupCollapsedLogsCount));\n}\n\ndescribe('For no differences', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: null,\n prevState: null,\n nextProps: null,\n nextState: null,\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'emptyValues'], expects);\n });\n });\n});\n\ndescribe('For different props eq by ref', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: {a: 'aa'},\n prevState: null,\n nextProps: {a: 'aa'},\n nextState: null,\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjects'], expects);\n });\n });\n});\n\ndescribe('For equal state eq by ref', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: null,\n prevState: {a: 'aa'},\n nextProps: null,\n nextState: {a: 'aa'},\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjects'], expects);\n });\n });\n});\n\ndescribe('For different state and props', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: {a: 'aa'},\n prevState: {a: 'aa'},\n nextProps: {a: 'aa'},\n nextState: {a: 'aa'},\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjects', 'changedObjects'], expects);\n });\n });\n});\n\ndescribe('For different hook', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevHookResult: {a: 'aa'},\n nextHookResult: {a: 'aa'},\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjectValuesDeepEquals'], expects);\n });\n });\n});\n\ndescribe('For different deep equal props', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: {a: {b: 'b'}},\n prevState: null,\n nextProps: {a: {b: 'b'}},\n nextState: null,\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjectValuesDeepEquals'], expects);\n });\n });\n});\n\ndescribe('For different deep equal state', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: null,\n prevState: {a: {b: 'b'}},\n nextProps: null,\n nextState: {a: {b: 'b'}},\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjectValuesDeepEquals'], expects);\n });\n });\n});\n\ndescribe('For different deep equal state and props', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: {a: {b: 'b'}},\n prevState: {a: {b: 'b'}},\n nextProps: {a: {b: 'b'}},\n nextState: {a: {b: 'b'}},\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjectValuesDeepEquals', 'changedObjectValuesDeepEquals'], expects);\n });\n });\n});\n\ndescribe('For different functions by the same name', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: {fn: function something() {}},\n prevState: null,\n nextProps: {fn: function something() {}},\n nextState: null,\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjectValues'], expects);\n });\n });\n});\n\ndescribe('Mix of changes', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => {\n test(description, () => {\n whyDidYouRender(React, userOptions);\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: {fn: function something() {}},\n prevState: {a: {b: 'b'}},\n nextProps: {fn: function something() {}},\n nextState: {a: {b: 'b'}},\n });\n\n defaultNotifier(updateInfo);\n\n expectLogTypes(['title', 'changedObjectValues', 'changedObjectValuesDeepEquals'], expects);\n });\n });\n});\n\ndescribe('logOnDifferentProps option', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n test('For different props', () => {\n whyDidYouRender(React, {onlyLogs: true});\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: {a: 'aaaa'},\n prevState: null,\n nextProps: {a: 'bbbb'},\n nextState: null,\n });\n\n defaultNotifier(updateInfo);\n\n const consoleOutputs = flushConsoleOutput();\n expect(consoleOutputs).toHaveLength(0);\n });\n\n test('For different state', () => {\n whyDidYouRender(React, {onlyLogs: true});\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: null,\n prevState: {a: 'aaaa'},\n nextProps: null,\n nextState: {a: 'bbbb'},\n });\n\n defaultNotifier(updateInfo);\n\n const consoleOutputs = flushConsoleOutput();\n expect(consoleOutputs).toHaveLength(0);\n });\n\n test('For different props with logOnDifferentValues', () => {\n whyDidYouRender(React, {logOnDifferentValues: true, onlyLogs: true});\n\n const updateInfo = getUpdateInfo({\n Component: TestComponent,\n prevProps: {a: 'aaaa'},\n prevState: null,\n nextProps: {a: 'bbbb'},\n nextState: null,\n });\n\n defaultNotifier(updateInfo);\n\n const consoleOutputs = flushConsoleOutput();\n expect(consoleOutputs).toHaveLength(\n calculateNumberOfExpectedLogs(\n ['title', 'changedObjectValues'],\n testInputAndExpects.onlyLogs.expects.logsCount\n )\n );\n });\n\n test('For different props with logOnDifferentValues for a specific component', () => {\n whyDidYouRender(React, {onlyLogs: true});\n\n class OwnTestComponent extends React.Component {\n static whyDidYouRender = {logOnDifferentValues: true};\n render() {\n return hi!
;\n }\n }\n\n const updateInfo = getUpdateInfo({\n Component: OwnTestComponent,\n prevProps: {a: 'aaaa'},\n prevState: null,\n nextProps: {a: 'bbbb'},\n nextState: null,\n });\n\n defaultNotifier(updateInfo);\n\n const consoleOutputs = flushConsoleOutput();\n expect(consoleOutputs).toHaveLength(\n calculateNumberOfExpectedLogs(\n ['title', 'changedObjectValues'],\n testInputAndExpects.onlyLogs.expects.logsCount\n )\n );\n });\n});\n"
},
{
"path": "tests/findObjectsDifferences.test.js",
"content": "import findObjectsDifferences from '~/findObjectsDifferences';\nimport {diffTypes} from '~/consts';\n\ndescribe('findObjectsDifferences shallow', () => {\n test('for empty values', () => {\n const prev = null;\n const next = null;\n const diffs = findObjectsDifferences(prev, next);\n expect(diffs).toEqual(false);\n });\n\n test('For no differences', () => {\n const prev = {prop: 'value'};\n const next = prev;\n const diffs = findObjectsDifferences(prev, next);\n expect(diffs).toEqual(false);\n });\n\n test('For prev empty value', () => {\n const prev = null;\n const next = {prop: 'value'};\n const diffs = findObjectsDifferences(prev, next);\n expect(diffs).toEqual([\n {\n pathString: 'prop',\n diffType: diffTypes.different,\n prevValue: undefined,\n nextValue: 'value',\n },\n ]);\n });\n\n test('For next empty value', () => {\n const prev = {prop: 'value'};\n const next = null;\n const diffs = findObjectsDifferences(prev, next);\n expect(diffs).toEqual([\n {\n pathString: 'prop',\n diffType: diffTypes.different,\n prevValue: 'value',\n nextValue: undefined,\n },\n ]);\n });\n\n test('For objects different by reference but equal by value', () => {\n const prop2 = {a: 'a'};\n const prev = {prop: 'value', prop2};\n const next = {prop: 'value', prop2};\n const diffs = findObjectsDifferences(prev, next);\n expect(diffs).toEqual([]);\n });\n\n test('For props inside the object different by reference but equal by value', () => {\n const prev = {prop: {a: 'a'}};\n const next = {prop: {a: 'a'}};\n const diffs = findObjectsDifferences(prev, next);\n expect(diffs).toEqual([\n {\n pathString: 'prop',\n diffType: diffTypes.deepEquals,\n prevValue: prev.prop,\n nextValue: next.prop,\n },\n ]);\n });\n\n test('For functions inside the object with the same name', () => {\n const prev = {fn: function something() {}};\n const next = {fn: function something() {}};\n const diffs = findObjectsDifferences(prev, next);\n expect(diffs).toEqual([\n {\n pathString: 'fn',\n diffType: diffTypes.function,\n prevValue: prev.fn,\n nextValue: next.fn,\n },\n ]);\n });\n\n test('Mix of differences inside the objects', () => {\n const prev = {prop: 'value', prop2: {a: 'a'}, prop3: 'AA', fn: function something() {}};\n const next = {prop: 'value', prop2: {a: 'a'}, prop3: 'ZZ', fn: function something() {}};\n const diffs = findObjectsDifferences(prev, next);\n expect(diffs).toEqual([\n {\n pathString: 'prop2',\n diffType: diffTypes.deepEquals,\n prevValue: prev.prop2,\n nextValue: next.prop2,\n },\n {\n pathString: 'prop3',\n diffType: diffTypes.different,\n prevValue: prev.prop3,\n nextValue: next.prop3,\n },\n {\n pathString: 'fn',\n diffType: diffTypes.function,\n prevValue: prev.fn,\n nextValue: next.fn,\n },\n ]);\n });\n});\n\ndescribe('findObjectsDifferences not shallow', () => {\n test('for empty values', () => {\n const prev = null;\n const next = null;\n const diffs = findObjectsDifferences(prev, next, {shallow: false});\n expect(diffs).toEqual(false);\n });\n\n test('For no differences', () => {\n const prev = {prop: 'value'};\n const next = prev;\n const diffs = findObjectsDifferences(prev, next, {shallow: false});\n expect(diffs).toEqual(false);\n });\n\n test('For prev empty value', () => {\n const prev = null;\n const next = {prop: 'value'};\n const diffs = findObjectsDifferences(prev, next, {shallow: false});\n expect(diffs).toEqual([\n {\n pathString: '',\n diffType: diffTypes.different,\n prevValue: null,\n nextValue: {prop: 'value'},\n },\n ]);\n });\n\n test('For next empty value', () => {\n const prev = {prop: 'value'};\n const next = null;\n const diffs = findObjectsDifferences(prev, next, {shallow: false});\n expect(diffs).toEqual([\n {\n pathString: '',\n diffType: diffTypes.different,\n prevValue: {prop: 'value'},\n nextValue: null,\n },\n ]);\n });\n\n test('For objects different by reference but equal by value', () => {\n const prop2 = {a: 'a'};\n const prev = {prop: 'value', prop2};\n const next = {prop: 'value', prop2};\n const diffs = findObjectsDifferences(prev, next, {shallow: false});\n expect(diffs).toEqual([\n {\n pathString: '',\n diffType: diffTypes.deepEquals,\n prevValue: {prop: 'value', prop2},\n nextValue: {prop: 'value', prop2},\n },\n ]);\n });\n\n test('For sets with same values', () => {\n const prev = new Set([1, 2, 3]);\n const next = new Set([1, 2, 3]);\n const diffs = findObjectsDifferences(prev, next, {shallow: false});\n expect(diffs).toEqual([{\n pathString: '',\n diffType: diffTypes.deepEquals,\n prevValue: prev,\n nextValue: next,\n }]);\n });\n\n test('For sets with different values', () => {\n const prev = new Set([1, 2, 3]);\n const next = new Set([4, 5, 6]);\n const diffs = findObjectsDifferences(prev, next, {shallow: false});\n expect(diffs).toEqual([\n {\n pathString: '',\n diffType: diffTypes.different,\n prevValue: prev,\n nextValue: next,\n },\n ]);\n });\n\n test('For sets with different value length', () => {\n const prev = new Set([1, 2, 3]);\n const next = new Set([1, 2, 3, 4]);\n const diffs = findObjectsDifferences(prev, next, {shallow: false});\n expect(diffs).toEqual([\n {\n pathString: '',\n diffType: diffTypes.different,\n prevValue: prev,\n nextValue: next,\n },\n ]);\n });\n});\n"
},
{
"path": "tests/getDisplayName.test.js",
"content": "import React from 'react';\n\nimport getDisplayName from '~/getDisplayName';\n\ntest('For a component', () => {\n class TestComponent extends React.Component {\n render() {\n return hi!
;\n }\n }\n const displayName = getDisplayName(TestComponent);\n expect(displayName).toBe('TestComponent');\n});\n\ntest('For inline functions', () => {\n const InlineComponent = () => (\n hi!
\n );\n InlineComponent.displayName = 'InlineComponentCustomName';\n const displayName = getDisplayName(InlineComponent);\n expect(displayName).toBe('InlineComponentCustomName');\n});\n\ntest('For inline functions with no name', () => {\n const InlineComponent = () => (\n hi!
\n );\n const displayName = getDisplayName(InlineComponent);\n expect(displayName).toBe('InlineComponent');\n});\n"
},
{
"path": "tests/getUpdateInfo.test.js",
"content": "import React from 'react';\n\nimport {diffTypes} from '~/consts';\nimport getUpdateInfo from '~/getUpdateInfo';\nimport getDisplayName from '~/getDisplayName';\nimport whyDidYouRender from '~';\n\nclass TestComponent extends React.Component {\n render() {\n return hi!
;\n }\n}\n\ndescribe('getUpdateInfo', () => {\n beforeEach(() => {\n whyDidYouRender(React);\n });\n\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n test('Empty props and state', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {},\n prevState: null,\n nextProps: {},\n nextState: null,\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n ownerDataMap: expect.any(WeakMap),\n displayName: 'TestComponent',\n reason: {\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Same props', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {a: 1},\n prevState: null,\n nextProps: {a: 1},\n nextState: null,\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n ownerDataMap: expect.any(WeakMap),\n displayName: 'TestComponent',\n reason: {\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Same state', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {},\n prevState: {a: 1},\n nextProps: {},\n nextState: {a: 1},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n ownerDataMap: expect.any(WeakMap),\n displayName: 'TestComponent',\n reason: {\n propsDifferences: [],\n stateDifferences: [],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Same props and state', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {b: 1},\n prevState: {a: 1},\n nextProps: {b: 1},\n nextState: {a: 1},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n ownerDataMap: expect.any(WeakMap),\n displayName: 'TestComponent',\n reason: {\n propsDifferences: [],\n stateDifferences: [],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Props change', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {a: 1},\n prevState: null,\n nextProps: {a: 2},\n nextState: null,\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: input.prevProps.a,\n nextValue: input.nextProps.a,\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('State change', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {},\n prevState: {a: 1},\n nextProps: {},\n nextState: {a: 2},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [],\n stateDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: input.prevState.a,\n nextValue: input.nextState.a,\n },\n ],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Props and state change', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {b: 1},\n prevState: {a: 1},\n nextProps: {b: 2},\n nextState: {a: 2},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [\n {\n pathString: 'b',\n diffType: diffTypes.different,\n prevValue: input.prevProps.b,\n nextValue: input.nextProps.b,\n },\n ],\n stateDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: input.prevState.a,\n nextValue: input.nextState.a,\n },\n ],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Props change by ref', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {a: {b: 'b'}},\n prevState: null,\n nextProps: {a: {b: 'b'}},\n nextState: null,\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: input.prevProps.a,\n nextValue: input.nextProps.a,\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('State changed by ref', () => {\n\n\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {},\n prevState: {a: {b: 'b'}},\n nextProps: {},\n nextState: {a: {b: 'b'}},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [],\n stateDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: input.prevState.a,\n nextValue: input.nextState.a,\n },\n ],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Props and state different by ref', () => {\n\n\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {b: {c: 'c'}},\n prevState: {a: {d: 'd'}},\n nextProps: {b: {c: 'c'}},\n nextState: {a: {d: 'd'}},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [\n {\n pathString: 'b',\n diffType: diffTypes.deepEquals,\n prevValue: input.prevProps.b,\n nextValue: input.nextProps.b,\n },\n ],\n stateDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: input.prevState.a,\n nextValue: input.nextState.a,\n },\n ],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Props change by function', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {a: () => {}},\n prevState: null,\n nextProps: {a: () => {}},\n nextState: null,\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.function,\n prevValue: input.prevProps.a,\n nextValue: input.nextProps.a,\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('State changed by function ref', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {},\n prevState: {a: () => {}},\n nextProps: {},\n nextState: {a: () => {}},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [],\n stateDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.function,\n prevValue: input.prevState.a,\n nextValue: input.nextState.a,\n },\n ],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Props and state different by function', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {a: () => {}},\n prevState: {b: () => {}},\n nextProps: {a: () => {}},\n nextState: {b: () => {}},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.function,\n prevValue: input.prevProps.a,\n nextValue: input.nextProps.a,\n },\n ],\n stateDifferences: [\n {\n pathString: 'b',\n diffType: diffTypes.function,\n prevValue: input.prevState.b,\n nextValue: input.nextState.b,\n },\n ],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('Mix of differences', () => {\n const input = {\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps: {a: () => {}, b: '123', c: {d: 'e'}, f: 3},\n prevState: null,\n nextProps: {a: () => {}, b: '12345', c: {d: 'e'}, f: 3},\n nextState: {a: 4},\n };\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n displayName: 'TestComponent',\n ownerDataMap: expect.any(WeakMap),\n reason: {\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.function,\n prevValue: input.prevProps.a,\n nextValue: input.nextProps.a,\n },\n {\n pathString: 'b',\n diffType: diffTypes.different,\n prevValue: input.prevProps.b,\n nextValue: input.nextProps.b,\n },\n {\n pathString: 'c',\n diffType: diffTypes.deepEquals,\n prevValue: input.prevProps.c,\n nextValue: input.nextProps.c,\n },\n ],\n stateDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: undefined,\n nextValue: input.nextState.a,\n },\n ],\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n\n test('deep equals and same object', () => {\n const sameProp = {a: {b: 'c'}};\n\n const prevProps = {className: 'aa', style: {width: '100%'}, sameProp};\n const nextProps = {className: 'aa', style: {width: '100%'}, sameProp};\n\n const input = getUpdateInfo({\n Component: TestComponent,\n displayName: getDisplayName(TestComponent),\n prevProps,\n prevState: null,\n nextProps,\n nextState: null,\n });\n\n const updateInfo = getUpdateInfo(input);\n\n expect(updateInfo).toEqual({\n ...input,\n ownerDataMap: expect.any(WeakMap),\n displayName: 'TestComponent',\n reason: {\n propsDifferences: [\n {\n pathString: 'style',\n diffType: diffTypes.deepEquals,\n prevValue: input.prevProps.style,\n nextValue: input.nextProps.style,\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n },\n });\n });\n});\n"
},
{
"path": "tests/hooks/childrenUsingHookResults.test.js",
"content": "import React from 'react';\nimport * as rtl from '@testing-library/react';\n\nimport whyDidYouRender from '~';\nimport {diffTypes} from '~/consts';\n\nlet updateInfos = [];\n\n// eslint-disable-next-line no-console\nconst someFn = () => console.log('hi!');\n\nbeforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n});\n\nafterEach(() => {\n if (React.__REVERT_WHY_DID_YOU_RENDER__) {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n }\n});\n\ndescribe('children using hook results', () => {\n test('without dependencies', () => {\n const AChild = () => hi!
;\n AChild.whyDidYouRender = true;\n\n const ComponentWithMemoHook = () => {\n const [currentState, setCurrentState] = React.useState({c: 'c'});\n \n React.useLayoutEffect(() => {\n setCurrentState({c: 'c'});\n }, []);\n\n const fnUseCallback = React.useCallback(() => someFn(currentState.c));\n const fnUseMemo = React.useMemo(() => () => someFn(currentState.c));\n const fnRegular = () => someFn(currentState.c);\n\n return (\n \n );\n };\n\n rtl.render(\n hi!
;\n Child.whyDidYouRender = true;\n\n const ComponentWithMemoHook = () => {\n const [currentState, setCurrentState] = React.useState({c: 'c'});\n\n React.useLayoutEffect(() => {\n setCurrentState({c: 'd'});\n }, []);\n\n const fnUseCallback = React.useCallback(() => someFn(currentState.c), [currentState]);\n const fnUseMemo = React.useMemo(() => () => someFn(currentState.c), [currentState]);\n const fnRegular = () => someFn(currentState.c);\n\n return (\n \n );\n };\n\n rtl.render(\n hi!
;\n Child.whyDidYouRender = true;\n\n const ComponentWithMemoHook = () => {\n const [currentState, setCurrentState] = React.useState({c: 'c'});\n\n React.useLayoutEffect(() => {\n setCurrentState({c: 'c'});\n }, []);\n\n const fnUseCallback = React.useCallback(() => someFn(currentState.c), [currentState]);\n const fnUseMemo = React.useMemo(() => () => someFn(currentState.c), [currentState]);\n const fnRegular = () => someFn(currentState.c);\n\n return (\n \n );\n };\n\n rtl.render(\n hi! {a} {currentState.b}
\n );\n };\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(0);\n });\n\n test('simple hooks tracking', () => {\n const ComponentWithHooks = ({a}) => {\n const [currentState, setCurrentState] = React.useState({b: 'b'});\n React.useLayoutEffect(() => {\n setCurrentState({b: 'b'});\n }, []);\n return (\n hi! {a} {currentState.b}
\n );\n };\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n });\n\n test('after removing WDYR', () => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n\n const ComponentWithHooks = ({a}) => {\n const [currentState, setCurrentState] = React.useState({b: 'b'});\n React.useLayoutEffect(() => {\n setCurrentState({b: 'b'});\n }, []);\n return (\n hi! {a} {currentState.b}
\n );\n };\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(0);\n });\n\n test('track component', () => {\n const ComponentWithHooks = ({a}) => {\n const [currentState] = React.useState({b: 'b'});\n\n return (\n hi! {a} {currentState.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n });\n\n test('track memoized component', () => {\n const ComponentWithHooks = React.memo(({a}) => {\n const [currentState] = React.useState({b: 'b'});\n\n return (\n hi! {a} {currentState.b}
\n );\n });\n\n ComponentWithHooks.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n });\n });\n\n describe('hooks - do not track', () => {\n let updateInfos = [];\n\n beforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n trackHooks: false,\n });\n });\n\n afterEach(() => {\n if (React.__REVERT_WHY_DID_YOU_RENDER__) {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n }\n });\n\n test('no whyDidYouRender=true', () => {\n const ComponentWithHooks = ({a}) => {\n const [currentState] = React.useState({b: 'b'});\n\n return (\n hi! {a} {currentState.b}
\n );\n };\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(0);\n });\n\n test('with whyDidYouRender=true', () => {\n const ComponentWithHooks = ({a}) => {\n const [currentState, setCurrentState] = React.useState({b: 'b'});\n React.useLayoutEffect(() => {\n setCurrentState({b: 'b'});\n }, []);\n return (\n hi! {a} {currentState.b}
\n );\n };\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(0);\n });\n\n test('after removing WDYR', () => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n\n const ComponentWithHooks = ({a}) => {\n const [currentState, setCurrentState] = React.useState({b: 'b'});\n React.useLayoutEffect(() => {\n setCurrentState({b: 'b'});\n }, []);\n return (\n hi! {a} {currentState.b}
\n );\n };\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(0);\n });\n });\n});\n"
},
{
"path": "tests/hooks/useContext.test.js",
"content": "import React from 'react';\nimport * as rtl from '@testing-library/react';\n\nimport whyDidYouRender from '~';\nimport {diffTypes} from '~/consts';\n\ndescribe('hooks - useContext', () => {\n let updateInfos = [];\n\n beforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n });\n\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n test('same value', () => {\n const MyContext = React.createContext('c');\n\n const ComponentWithContextHook = ({a, b}) => {\n const valueFromContext = React.useContext(MyContext);\n\n return (\n hi! {a} {b} {valueFromContext}
\n );\n };\n ComponentWithContextHook.whyDidYouRender = true;\n\n const OuterComponent = () => {\n const [currentState, setCurrentState] = React.useState('c');\n\n React.useLayoutEffect(() => {\n setCurrentState('c');\n }, []);\n\n return (\n \n \n \n
\n \n );\n };\n\n rtl.render(\n hi! {a} {b} {valueFromContext.c}
\n );\n });\n ComponentWithContextHook.whyDidYouRender = true;\n\n const OuterComponent = () => {\n const [currentState, setCurrentState] = React.useState({c: 'c'});\n\n React.useLayoutEffect(() => {\n setCurrentState({c: 'c'});\n }, []);\n\n return (\n \n \n \n
\n \n );\n };\n\n rtl.render(\n hi! {a} {b} {valueFromContext.c}
\n );\n };\n ComponentWithContextHook.whyDidYouRender = true;\n\n const OuterComponent = () => {\n const [currentState, setCurrentState] = React.useState({c: 'c'});\n\n React.useLayoutEffect(() => {\n setCurrentState({c: 'c'});\n }, []);\n\n return (\n \n \n \n
\n \n );\n };\n\n rtl.render(\n hi! {state.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n hi! {a} {state.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n hookDifferences: [{\n pathString: '',\n diffType: diffTypes.different,\n prevValue: {b: 'b'},\n nextValue: {a: 'a'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n });\n\n test('deep equals', () => {\n const initialState = {b: 'b'};\n\n function reducer() {\n return {b: 'b'};\n }\n\n const ComponentWithHooks = ({a}) => {\n const [state, dispatch] = React.useReducer(reducer, initialState);\n\n React.useLayoutEffect(() => {\n dispatch({type: 'something'});\n }, []);\n\n return (\n hi! {a} {state.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {b: 'b'},\n prevValue: {b: 'b'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n });\n});\n"
},
{
"path": "tests/hooks/useState.test.js",
"content": "import React from 'react';\nimport * as rtl from '@testing-library/react';\n\nimport whyDidYouRender from '~';\nimport {diffTypes} from '~/consts';\n\ndescribe('hooks - useState', () => {\n let updateInfos = [];\n\n beforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n });\n\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n test('setState - same value', () => {\n const initialState = {b: 'b'};\n const ComponentWithHooks = () => {\n const [currentState, setCurrentState] = React.useState(initialState);\n\n React.useLayoutEffect(() => {\n setCurrentState(initialState);\n }, []);\n\n return (\n hi! {currentState.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n hi! {currentState.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n hi! {a} {currentState.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: false,\n stateDifferences: false,\n hookDifferences: [{\n pathString: '',\n diffType: diffTypes.deepEquals,\n prevValue: {b: 'b'},\n nextValue: {b: 'b'},\n }],\n ownerDifferences: false,\n });\n });\n});\n\ndescribe('track hooks', () => {\n let updateInfos = [];\n\n beforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n });\n\n afterEach(() => {\n if (React.__REVERT_WHY_DID_YOU_RENDER__) {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n }\n });\n\n test('same value', () => {\n const value = {b: 'b'};\n\n let effectCalled = false;\n\n const ComponentWithHooks = ({a}) => {\n const [currentState, setCurrentState] = React.useState(value);\n\n React.useLayoutEffect(() => {\n effectCalled = true;\n setCurrentState(value);\n }, []);\n\n return (\n hi! {a} {currentState.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(0);\n expect(effectCalled).toBeTruthy();\n });\n\n test('different (falsy to truthy)', () => {\n const ComponentWithHooks = () => {\n const [currentResult, setCurrentState] = React.useState(false);\n const result = React.useMemo(() => currentResult, [currentResult]);\n\n React.useLayoutEffect(() => {\n setCurrentState(true);\n }, []);\n\n return (\n hi! {result}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = {\n logOnDifferentValues: true,\n };\n\n rtl.render(\n hi! {a} {currentState.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {b: 'b'},\n prevValue: {b: 'b'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n });\n\n test('deep equals direct import', () => {\n const ComponentWithHooks = ({a}) => {\n const [currentState, setCurrentState] = React.useState({b: 'b'});\n\n React.useLayoutEffect(() => {\n setCurrentState({b: 'b'});\n }, []);\n\n return (\n hi! {a} {currentState.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {b: 'b'},\n prevValue: {b: 'b'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n });\n\n test('many deep equals direct import', () => {\n const ComponentWithHooks = ({a}) => {\n const [currentStateA, setCurrentStateA] = React.useState({a: 'a'});\n const [currentStateB, setCurrentStateB] = React.useState({b: 'b'});\n const [currentStateC, setCurrentStateC] = React.useState({c: 'c'});\n const [currentStateD, setCurrentStateD] = React.useState({d: 'd'});\n const [currentStateE, setCurrentStateE] = React.useState({e: 'e'});\n\n React.useLayoutEffect(() => {\n setCurrentStateA({a: 'a'});\n setCurrentStateB({b: 'b'});\n setCurrentStateC({c: 'c'});\n setCurrentStateD({d: 'd'});\n setCurrentStateE({e: 'e'});\n }, []);\n\n return (\n hi! {a} {currentStateA.a} {currentStateB.b} {currentStateC.c} {currentStateD.d} {currentStateE.e}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(5);\n expect(updateInfos[0].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {a: 'a'},\n prevValue: {a: 'a'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n expect(updateInfos[1].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {b: 'b'},\n prevValue: {b: 'b'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n expect(updateInfos[2].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {c: 'c'},\n prevValue: {c: 'c'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n expect(updateInfos[3].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {d: 'd'},\n prevValue: {d: 'd'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n expect(updateInfos[4].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {e: 'e'},\n prevValue: {e: 'e'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n });\n\n test('deep equals functional use', () => {\n const ComponentWithHooks = ({a}) => {\n const [currentState, setCurrentState] = React.useState({b: 'b'});\n\n React.useLayoutEffect(() => {\n setCurrentState(() => ({b: 'b'}));\n }, []);\n\n return (\n hi! {a} {currentState.b}
\n );\n };\n\n ComponentWithHooks.whyDidYouRender = true;\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n hookDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {b: 'b'},\n prevValue: {b: 'b'},\n }],\n propsDifferences: false,\n stateDifferences: false,\n ownerDifferences: false,\n });\n });\n});\n"
},
{
"path": "tests/hooks/useSyncExternalStore.test.js",
"content": "import React from 'react';\nimport * as rtl from '@testing-library/react';\n\nimport whyDidYouRender from '~';\nimport {diffTypes} from '~/consts';\n\ndescribe('hooks - useSyncExternalStore', () => {\n let updateInfos = [];\n\n function createSimpleStore(initialState) {\n let state = initialState;\n const listeners = new Set();\n\n return {\n getState: () => state,\n setState: (newState) => {\n state = newState;\n listeners.forEach((listener) => listener());\n },\n subscribe: (listener) => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n },\n };\n }\n\n beforeEach(() => {\n updateInfos = [];\n\n whyDidYouRender(React, {\n notifier: (updateInfo) => updateInfos.push(updateInfo),\n });\n });\n\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n test('same value', () => {\n const store = createSimpleStore('c');\n\n const ComponentWithSyncExternalStore = ({a, b}) => {\n const valueFromStore = React.useSyncExternalStore(\n store.subscribe,\n store.getState\n );\n\n return (\n \n hi! {a} {b} {valueFromStore}\n
\n );\n };\n ComponentWithSyncExternalStore.whyDidYouRender = true;\n\n const OuterComponent = () => {\n React.useLayoutEffect(() => {\n store.setState('c');\n }, []);\n\n return (\n \n
\n );\n };\n\n rtl.render(\n hi! {a} {b} {valueFromStore.c}\n
\n );\n };\n ComponentWithSyncExternalStore.whyDidYouRender = true;\n\n const OuterComponent = () => {\n React.useLayoutEffect(() => {\n store.setState({c: 'c'});\n }, []);\n\n return (\n \n
\n );\n };\n\n rtl.render(\n hi!\n
\n );\n }\n }\n const string = ReactDOMServer.renderToStaticMarkup(hi!
');\n});\n"
},
{
"path": "tests/librariesTests/react-redux.test.js",
"content": "import React from 'react';\nimport {legacy_createStore as createStore} from 'redux';\nimport {cloneDeep} from 'lodash';\nimport * as rtl from '@testing-library/react';\n\nimport {diffTypes} from '~/consts';\n\nimport whyDidYouRender from '~';\n\nconst ReactRedux = {...require('react-redux')};\nconst {connect, Provider} = ReactRedux;\n\ndescribe('react-redux - simple', () => {\n const initialState = {a: {b: 'c'}};\n\n const rootReducer = (state, action) => {\n if (action.type === 'differentState') {\n return {a: {b: 'd'}};\n }\n\n if (action.type === 'deepEqlState') {\n return cloneDeep(state);\n }\n\n return state;\n };\n\n let store;\n let updateInfos;\n\n beforeEach(() => {\n store = createStore(rootReducer, initialState);\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n });\n\n afterEach(() => {\n if (React.__REVERT_WHY_DID_YOU_RENDER__) {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n }\n });\n\n test('same state after dispatch', () => {\n const SimpleComponent = ({a}) => (\n {a.b}
\n );\n const ConnectedSimpleComponent = connect(\n state => ({a: state.a})\n )(SimpleComponent);\n\n SimpleComponent.whyDidYouRender = true;\n\n const Main = () => (\n \n \n );\n\n rtl.render({a.b}
\n );\n const ConnectedSimpleComponent = connect(\n state => ({a: state.a})\n )(SimpleComponent);\n\n SimpleComponent.whyDidYouRender = true;\n\n const Main = () => (\n \n \n );\n\n rtl.render(\n {a.b}\n
\n );\n \n const ConnectedSimpleComponent = connect(\n state => ({a: state.a})\n )(SimpleComponent);\n\n SimpleComponent.whyDidYouRender = true;\n\n const Main = () => (\n \n \n );\n\n rtl.render({a.b}
\n );\n };\n ConnectedSimpleComponent.whyDidYouRender = true;\n\n const Main = () => (\n \n \n );\n\n rtl.render({a.b}
\n );\n };\n\n ConnectedSimpleComponent.whyDidYouRender = true;\n\n const Main = () => (\n \n \n );\n\n rtl.render(\n {a.b}\n
\n );\n };\n ConnectedSimpleComponent.whyDidYouRender = true;\n\n const Main = () => (\n \n \n );\n\n rtl.render(hi! {JSON.stringify(a)} {state}
\n );\n };\n\n InnerComp.whyDidYouRender = true;\n\n const Comp = () => (\n \n \n \n \n );\n\n const {rerender} = rtl.render(hi! {a.b}
;\n };\n\n const InnerComp = connect(\n state => ({a: state.a}),\n {setDeepEqlState: () => ({type: 'deepEqlState'})}\n )(InnerFn);\n\n InnerFn.whyDidYouRender = true;\n\n const Comp = () => (\n \n \n \n }/>\n \n \n \n );\n\n rtl.render(foobar
;\n const StyledInnerComponent = styled(InnerComponent)``;\n\n StyledInnerComponent.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('styled-components wrap of a memoized component', () => {\n const InnerComponent = React.memo(() => foobar
);\n const StyledInnerComponent = styled(InnerComponent)``;\n\n StyledInnerComponent.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('styled-components with forward ref', () => {\n const InnerComponent = React.forwardRef((props, ref) =>\n foobar
\n );\n\n const Styled = styled(InnerComponent)``;\n\n Styled.whyDidYouRender = true;\n\n const Wrapper = (props) => {\n const ref = React.useRef(null);\n return \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: {\n hookDifferences: false,\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n },\n });\n});\n\ntest('styled-components with memoized forward ref', () => {\n const InnerComponent = React.memo(\n React.forwardRef((props, ref) =>\n foobar
\n )\n );\n\n const StyledInnerComponent = styled(InnerComponent)``;\n\n StyledInnerComponent.whyDidYouRender = true;\n\n const Wrapper = (props) => {\n const ref = React.useRef(null);\n return \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: {\n hookDifferences: false,\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n },\n });\n});\n"
},
{
"path": "tests/logOnDifferentValues.test.js",
"content": "import React from 'react';\nimport * as rtl from '@testing-library/react';\n\nimport whyDidYouRender from '~';\n\nlet updateInfos = [];\nbeforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n include: [/.*/],\n logOnDifferentValues: true,\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n});\n\nafterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n});\n\ntest('hook value change', () => {\n const Foo = React.memo(function Foo(props) {\n return (\n \n Foo {props.a.v}\n
\n );\n });\n\n const App = React.memo(function App() {\n const [text, setText] = React.useState('Click me');\n\n return (\n \n setText(state => state + '.')}\n data-testid=\"button\"\n >\n {text}\n \n
\n );\n });\n\n const {getByTestId} = rtl.render(\n \n
{error.message} \n
{error.stack}
\n
\n setText(state => state + '.')}\n data-testid=\"button\"\n >\n {text}\n \n
\n );\n });\n\n const {getByTestId} = rtl.render(\n );\n rerender();\n rerender();\n\n expect(updateInfos).toHaveLength(2);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: {\n propsDifferences: [{\n pathString: 'ready',\n diffType: diffTypes.different,\n prevValue: false,\n nextValue: true,\n }],\n stateDifferences: false,\n hookDifferences: [\n {\n hookName: 'useState',\n differences: [{\n pathString: '',\n diffType: diffTypes.different,\n prevValue: false,\n nextValue: true,\n }],\n },\n ],\n },\n });\n expect(updateInfos[1].reason).toEqual({\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: {\n propsDifferences: [{\n pathString: 'ready',\n diffType: diffTypes.different,\n prevValue: true,\n nextValue: false,\n }],\n stateDifferences: false,\n hookDifferences: [{hookName: 'useState', differences: false}],\n },\n });\n });\n\n test('owner uses cloneElement', () => {\n rtl.render();\n rerender(hi!
;\n }\n}\n\nconst createStateTestComponent = (initialState, newState) => {\n return class StateTestComponent extends React.Component {\n static whyDidYouRender = true;\n state = initialState;\n componentDidMount() {\n this.setState(newState);\n }\n render() {\n return hi!
;\n }\n };\n};\n\nlet updateInfos = [];\nbeforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n});\n\nafterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n});\n\ntest('Empty props and state', () => {\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n expect(updateInfos).toHaveLength(1);\n});\n\ntest('Same state', () => {\n const StateTestComponent = createStateTestComponent({a: 1}, {a: 1});\n rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('With implemented \"componentDidUpdate()\"', () => {\n let innerComponentDidUpdateCalled = false;\n class OwnTestComponent extends React.Component {\n static whyDidYouRender = true;\n componentDidUpdate() {\n innerComponentDidUpdateCalled = true;\n }\n render() {\n return hi!
;\n }\n }\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n expect(innerComponentDidUpdateCalled).toBe(true);\n expect(updateInfos).toHaveLength(1);\n});\n\ntest('With render as an arrow function', () => {\n class OwnTestComponent extends React.Component {\n static whyDidYouRender = true;\n componentDidMount() {\n this.setState({c: 'c'});\n }\n render = () => {\n return hi!
;\n };\n }\n\n const {rerender} = rtl.render(\n \n );\n\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: false,\n stateDifferences: [{\n diffType: diffTypes.different,\n nextValue: 'c',\n pathString: 'c',\n prevValue: undefined,\n }],\n hookDifferences: false,\n ownerDifferences: false,\n });\n\n rerender(\n \n );\n\n expect(updateInfos[1].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n\n expect(updateInfos).toHaveLength(2);\n});\n\ntest('With render as a binded function', () => {\n class OwnTestComponent extends React.Component {\n static whyDidYouRender = true;\n constructor(props, context) {\n super(props, context);\n this.render = this.render.bind(this);\n }\n componentDidMount() {\n this.setState({c: 'c'});\n }\n render() {\n return hi!
;\n }\n }\n\n const {rerender} = rtl.render(\n \n );\n\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: false,\n stateDifferences: [{\n diffType: diffTypes.different,\n nextValue: 'c',\n pathString: 'c',\n prevValue: undefined,\n }],\n hookDifferences: false,\n ownerDifferences: false,\n });\n\n rerender(\n \n );\n\n expect(updateInfos[1].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n\n expect(updateInfos).toHaveLength(2);\n});\n\ntest('With implemented \"componentDidUpdate()\" with a snapshot - not tracked', () => {\n let resolve = false;\n class OwnTestComponent extends React.Component {\n getSnapshotBeforeUpdate() {\n return true;\n }\n componentDidUpdate(prevProps, prevState, snapshot) {\n resolve = snapshot;\n }\n render() {\n return hi!
;\n }\n }\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(resolve).toBe(true);\n expect(updateInfos).toHaveLength(0);\n});\n\ntest('With implemented \"componentDidUpdate()\" with a snapshot', () => {\n let resolve = false;\n class OwnTestComponent extends React.Component {\n static whyDidYouRender = true;\n getSnapshotBeforeUpdate() {\n return true;\n }\n componentDidUpdate(prevProps, prevState, snapshot) {\n resolve = snapshot;\n }\n render() {\n return hi!
;\n }\n }\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(resolve).toBe(true);\n expect(updateInfos).toHaveLength(1);\n});\n\ntest('Component created with \"createReactClass\"', () => {\n const CreateReactClassComponent = createReactClass({\n displayName: 'Foo',\n render() {\n return hi!
;\n },\n });\n\n CreateReactClassComponent.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('Component created with \"createReactClass\" with implemented \"componentDidUpdate()\"', () => {\n let innerComponentDidUpdateCalled = false;\n const CreateReactClassComponent = createReactClass({\n displayName: 'Foo',\n componentDidUpdate() {\n innerComponentDidUpdateCalled = true;\n },\n render() {\n return hi!
;\n },\n });\n\n CreateReactClassComponent.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n expect(innerComponentDidUpdateCalled).toBe(true);\n});\n\ntest('Element created with \"createFactory\"', () => {\n const TestComponentElementCreator = React.createFactory(TestComponent);\n\n const {rerender} = rtl.render(\n TestComponentElementCreator({a: 1})\n );\n rerender(\n TestComponentElementCreator({a: 1})\n );\n\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n\n expect(updateInfos).toHaveLength(1);\n});\n\ntest('Element created with \"cloneElement\"', () => {\n const testElement = ;\n const testElement2 = React.cloneElement(testElement);\n\n const {rerender} = rtl.render(testElement);\n rerender(testElement2);\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('Several class components', () => {\n const {rerender} = rtl.render(\n <>\n {content}
;\n });\n\n MyComponent.whyDidYouRender = true;\n\n let componentContentFromRef = null;\n let timesRefWasCalled = 0;\n\n const handleRef = ref => {\n if (!ref) {\n return;\n }\n timesRefWasCalled++;\n componentContentFromRef = ref.innerHTML;\n };\n\n const {rerender} = rtl.render(\n \n );\n\n rerender(\n \n );\n\n expect(componentContentFromRef).toBe(content);\n expect(timesRefWasCalled).toBe(1);\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('forward ref a memo component', () => {\n expect(() => {\n const content = 'My component!!!';\n\n const MyComponent = React.forwardRef(React.memo((props, ref) => {\n return {content}
;\n }, () => true));\n\n MyComponent.whyDidYouRender = true;\n\n let componentContentFromRef = null;\n let timesRefWasCalled = 0;\n\n const handleRef = ref => {\n if (!ref) {\n return;\n }\n timesRefWasCalled++;\n componentContentFromRef = ref.innerHTML;\n };\n\n const {rerender} = rtl.render(\n \n );\n\n rerender(\n \n );\n\n expect(componentContentFromRef).toBe(content);\n expect(timesRefWasCalled).toBe(1);\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n }).toThrow();\n global.flushConsoleOutput();\n});\n"
},
{
"path": "tests/patches/patchFunctionalOrStrComponent.test.js",
"content": "import React from 'react';\nimport * as rtl from '@testing-library/react';\n\nimport whyDidYouRender from '~';\nimport {diffTypes} from '~/consts';\n\nconst FunctionalTestComponent = () => (\n hi!
\n);\nFunctionalTestComponent.whyDidYouRender = true;\n\nlet updateInfos = [];\nbeforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n});\n\nafterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n});\n\ntest('simple inline component', () => {\n const InlineComponent = () => (\n hi!
\n );\n InlineComponent.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('Several functional components', () => {\n const {rerender} = rtl.render(\n <>\n hi!
\n));\nReactMemoTestComponent.whyDidYouRender = true;\nReactMemoTestComponent.displayName = 'ReactMemoTestComponent';\n\nlet updateInfos = [];\nbeforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n });\n});\n\nafterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n});\n\ntest('Memoize text component', () => {\n const obj = {a: []};\n\n const Svg = React.memo('svg');\n Svg.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(0);\n});\n\ntest('Component memoized with React.memo - no change', () => {\n const obj = {a: []};\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(0);\n});\n\ntest('Component memoized with React.memo - different prop values', () => {\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.different,\n prevValue: 1,\n nextValue: 2,\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('Component memoized with React.memo - deep equal prop values', () => {\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('React.memo Component memoized with another React.memo - deep equal prop values', () => {\n const ReactSecondMemoComponent = React.memo(ReactMemoTestComponent);\n ReactSecondMemoComponent.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('memo a forward ref component', () => {\n const content = 'My component!!!';\n\n const MyComponent = React.memo(React.forwardRef((props, ref) => {\n return {content}
;\n }));\n\n MyComponent.whyDidYouRender = true;\n\n let componentContentFromRef = null;\n let timesRefWasCalled = 0;\n\n const handleRef = ref => {\n if (!ref) {\n return;\n }\n timesRefWasCalled++;\n componentContentFromRef = ref.innerHTML;\n };\n\n const {rerender} = rtl.render(\n \n );\n\n rerender(\n \n );\n\n expect(componentContentFromRef).toBe(content);\n expect(timesRefWasCalled).toBe(1);\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('memo a class component', () => {\n class ClassComponent extends React.Component {\n render() {\n return hi!
;\n }\n }\n\n const MyComponent = React.memo(ClassComponent);\n\n MyComponent.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('memo a pure class component', () => {\n class ClassComponent extends React.PureComponent {\n render() {\n return hi!
;\n }\n }\n\n const MyComponent = React.memo(ClassComponent);\n\n MyComponent.whyDidYouRender = true;\n\n const {rerender} = rtl.render(\n \n );\n\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n global.flushConsoleOutput();\n});\n"
},
{
"path": "tests/shouldTrack.test.js",
"content": "import React from 'react';\n\nimport shouldTrack from '~/shouldTrack';\nimport whyDidYouRender from '~';\n\nclass TrackedTestComponent extends React.Component {\n static whyDidYouRender = true;\n render() {\n return hi!
;\n }\n}\n\nclass TrackedTestComponentNoHooksTracking extends React.Component {\n static whyDidYouRender = {trackHooks: false};\n render() {\n return hi!
;\n }\n}\n\nclass NotTrackedTestComponent extends React.Component {\n render() {\n return hi!
;\n }\n}\n\nclass ExcludedTestComponent extends React.Component {\n static whyDidYouRender = false;\n render() {\n return hi!
;\n }\n}\n\nclass PureComponent extends React.PureComponent {\n render() {\n return hi!
;\n }\n}\n\nconst MemoComponent = React.memo(() => (\n hi!
\n));\nMemoComponent.displayName = 'MemoComponent';\n\ndescribe('shouldTrack', () => {\n afterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n });\n\n describe('component changes', () => {\n test('Do not track not tracked component (default)', () => {\n whyDidYouRender(React);\n const isShouldTrack = shouldTrack(NotTrackedTestComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(false);\n });\n\n test('Track tracked component', () => {\n whyDidYouRender(React);\n const isShouldTrack = shouldTrack(TrackedTestComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(true);\n });\n\n test('Track included not tracked components', () => {\n whyDidYouRender(React, {\n include: [/TestComponent/],\n });\n const isShouldTrack = shouldTrack(NotTrackedTestComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(true);\n });\n\n test('Dont track components with whyDidYouRender=false', () => {\n whyDidYouRender(React, {\n include: [/ExcludedTestComponent/],\n });\n const isShouldTrack = shouldTrack(ExcludedTestComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(false);\n });\n\n test('Do not track not included not tracked components', () => {\n whyDidYouRender(React, {\n include: [/0/],\n });\n const isShouldTrack = shouldTrack(NotTrackedTestComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(false);\n });\n\n test('Do not track excluded tracked components', () => {\n whyDidYouRender(React, {\n exclude: [/TrackedTestComponent/],\n });\n const isShouldTrack = shouldTrack(TrackedTestComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(false);\n });\n\n test('Pure component', () => {\n whyDidYouRender(React, {\n trackAllPureComponents: true,\n });\n const isShouldTrack = shouldTrack(PureComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(true);\n });\n\n test('Memo component', () => {\n whyDidYouRender(React, {\n trackAllPureComponents: true,\n });\n const isShouldTrack = shouldTrack(MemoComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(true);\n });\n\n test('Pure component excluded', () => {\n whyDidYouRender(React, {\n trackAllPureComponents: true,\n exclude: [/PureComponent/],\n });\n const isShouldTrack = shouldTrack(PureComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(false);\n });\n\n test('Memo component excluded', () => {\n whyDidYouRender(React, {\n trackAllPureComponents: true,\n exclude: [/MemoComponent/],\n });\n const isShouldTrack = shouldTrack(MemoComponent, {isHookChange: false});\n expect(isShouldTrack).toBe(false);\n });\n });\n\n describe('hooks changes', () => {\n test('Do not track not tracked component (default)', () => {\n whyDidYouRender(React);\n const isShouldTrack = shouldTrack(NotTrackedTestComponent, {isHookChange: true});\n expect(isShouldTrack).toBe(false);\n });\n\n test('Track tracked component', () => {\n whyDidYouRender(React);\n const isShouldTrack = shouldTrack(TrackedTestComponent, {isHookChange: true});\n expect(isShouldTrack).toBe(true);\n });\n\n test('Do not track hook changes with \"trackHooks: false\"', () => {\n whyDidYouRender(React);\n const isShouldTrack = shouldTrack(TrackedTestComponentNoHooksTracking, {isHookChange: true});\n expect(isShouldTrack).toBe(false);\n });\n });\n});\n"
},
{
"path": "tests/strictMode.test.js",
"content": "import React from 'react';\nimport * as rtl from '@testing-library/react';\n\nimport {diffTypes} from '~/consts';\nimport whyDidYouRender from '~';\n\nclass TestComponent extends React.Component {\n static whyDidYouRender = true;\n render() {\n return hi!
;\n }\n}\n\nclass PureTestComponent extends React.PureComponent {\n static whyDidYouRender = true;\n render() {\n return hi!
;\n }\n}\n\nconst FunctionalTestComponent = () => (\n hi!
\n);\nFunctionalTestComponent.whyDidYouRender = true;\nFunctionalTestComponent.displayName = 'FunctionalTestComponent';\n\nconst FunctionalTestComponentWithHooks = () => {\n const [state1, setState1] = React.useState({count1: 1});\n const [state2, setState2] = React.useState({count2: 2});\n\n React.useLayoutEffect(() => {\n setState1({count1: 1});\n setState2({count2: 2});\n }, []);\n\n return (\n hi! {state1.count1} {state2.count2}
\n );\n};\nFunctionalTestComponentWithHooks.whyDidYouRender = true;\nFunctionalTestComponentWithHooks.displayName = 'FunctionalTestComponentWithHooks';\n\nconst ReactMemoTestComponent = React.memo(() => (\n hi!
\n));\nReactMemoTestComponent.whyDidYouRender = true;\nReactMemoTestComponent.displayName = 'ReactMemoTestComponent';\n\nlet updateInfos = [];\nbeforeEach(() => {\n updateInfos = [];\n whyDidYouRender(React, {\n notifier: updateInfo => updateInfos.push(updateInfo),\n logOwnerReasons: true,\n trackHooks: true,\n });\n});\n\nafterEach(() => {\n React.__REVERT_WHY_DID_YOU_RENDER__();\n});\n\ntest('Strict mode- class component no props change', () => {\n const {rerender} = rtl.render(\n \n \n \n
\n \n );\n\n rerender(\n \n \n \n
\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('Strict mode- class component props change', () => {\n const {rerender} = rtl.render(\n \n \n \n
\n \n );\n\n rerender(\n \n \n \n
\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('Strict mode- pure class component no props change', () => {\n const {rerender} = rtl.render(\n \n \n \n );\n\n rerender(\n \n \n \n );\n\n expect(updateInfos).toHaveLength(0);\n});\n\ntest('Strict mode- pure class component props change', () => {\n const {rerender} = rtl.render(\n \n \n \n );\n\n rerender(\n \n \n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [\n {\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n },\n ],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: false,\n });\n});\n\ntest('Strict mode- functional component no props change', () => {\n const Main = props => {\n return (\n \n \n
\n \n );\n };\n const {rerender} = rtl.render(\n \n );\n\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: {\n hookDifferences: false,\n propsDifferences: [],\n stateDifferences: false,\n },\n });\n});\n\ntest('Strict mode- functional component with props change', () => {\n const Main = props => {\n return (\n \n \n
\n \n );\n };\n const {rerender} = rtl.render(\n \n );\n\n rerender(\n \n );\n\n expect(updateInfos).toHaveLength(1);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: [{\n diffType: diffTypes.deepEquals,\n pathString: 'a',\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n hookDifferences: false,\n ownerDifferences: {\n hookDifferences: false,\n propsDifferences: [{\n pathString: 'a',\n diffType: diffTypes.deepEquals,\n prevValue: [],\n nextValue: [],\n }],\n stateDifferences: false,\n },\n });\n});\n\ntest('Strict mode- functional component with hooks no props change', () => {\n const Main = props => {\n return (\n \n \n
\n \n );\n };\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(2);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: false,\n stateDifferences: false,\n hookDifferences: [\n {\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {count1: 1},\n prevValue: {count1: 1},\n },\n ],\n ownerDifferences: false,\n });\n expect(updateInfos[1].reason).toEqual({\n propsDifferences: false,\n stateDifferences: false,\n hookDifferences: [\n {\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {count2: 2},\n prevValue: {count2: 2},\n },\n ],\n ownerDifferences: false,\n });\n});\n\ntest('Strict mode- functional component with hooks with props change', () => {\n const Main = props => {\n return (\n \n \n
\n \n );\n };\n\n rtl.render(\n \n );\n\n expect(updateInfos).toHaveLength(2);\n expect(updateInfos[0].reason).toEqual({\n propsDifferences: false,\n stateDifferences: false,\n hookDifferences: [\n {\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {count1: 1},\n prevValue: {count1: 1},\n },\n ],\n ownerDifferences: false,\n });\n expect(updateInfos[1].reason).toEqual({\n propsDifferences: false,\n stateDifferences: false,\n hookDifferences: [\n {\n diffType: diffTypes.deepEquals,\n pathString: '',\n nextValue: {count2: 2},\n prevValue: {count2: 2},\n },\n ],\n ownerDifferences: false,\n });\n});\n\ntest('Strict mode- strict parent and child', () => {\n const App = React.memo(() => {\n const [whatever, setWhatever] = React.useState({a: 'b'});\n const [whatever2, setWhatever2] = React.useState({a2: 'b2'});\n\n const clickme = () => {\n setWhatever({a: 'b'});\n setWhatever2({a2: 'b2'});\n };\n\n return (\n \n
test \n
{whatever.a} {whatever2.a2}
\n
\n
child
;\n }\n\n Child.whyDidYouRender = true;\n\n const StrictApp = () => (\n \n \n );\n\n const {getByText} = rtl.render(hi!
;\n }\n }\n\n rtl.render(\n \n
\n );\n\n expect(isStrictMode).toBe(false);\n\n rtl.render(\n \n <>\n \n
\n \n hiiiiiiiii\n
\n \n \n );\n\n expect(isStrictMode).toBe(true);\n });\n\n test('pure class component', () => {\n let isStrictMode;\n class TestComponent extends React.PureComponent {\n static whyDidYouRender = true;\n render() {\n isStrictMode = checkIfInsideAStrictModeTree(this);\n return hi!
;\n }\n }\n\n rtl.render(\n \n
\n );\n\n expect(isStrictMode).toBe(false);\n\n rtl.render(\n \n <>\n \n
\n \n hiiiiiiiii\n
\n \n \n );\n\n expect(isStrictMode).toBe(true);\n });\n});\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"include\": [\"**/*.js\", \"**/*.jsx\", \"**/*.ts\", \"**/*.tsx\", \"babel.config.cjs\", \"tests/babel.config.cjs\"],\n \"exclude\": [\"node_modules\"],\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"allowJs\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"moduleResolution\": \"Node\",\n \"jsx\": \"react\",\n \"paths\": {\n \"~*\": [\"src*\"],\n }\n },\n}\n"
},
{
"path": "tsx-test.tsx",
"content": "/* eslint-disable no-unused-vars */\nimport './types'\nimport React from 'react'\nimport * as Redux from 'react-redux'\nimport whyDidYouRender, { ExtraHookToTrack } from '.';\n\n/* SHOULD ERROR because bad trackExtraHooks was provided (second argument should be string) */\nwhyDidYouRender(React, {trackExtraHooks: [[Redux, Redux.useSelector]]});\nwhyDidYouRender(React, {trackExtraHooks: [[Redux, 'useSelector']]});\n\ninterface Props {\n str: string\n}\n\nconst FunctionalComponent: React.FC = ({str}) => {str}
\nFunctionalComponent.whyDidYouRender = true\nFunctionalComponent.whyDidYouRender = {collapseGroups: true}\n/* SHOULD ERROR because we use an unsupported whyDidYouRender prop */\nFunctionalComponent.whyDidYouRender = {nonWDYRProp: true}\n/* SHOULD ERROR because whyDidYouRender shouldn't be a string */\nFunctionalComponent.whyDidYouRender = 'a'\n\nconst MemoFunctionalComponent = React.memo(({str}) => {str}
)\nMemoFunctionalComponent.whyDidYouRender = true\nMemoFunctionalComponent.whyDidYouRender = {collapseGroups: true}\n/* SHOULD ERROR because we use an unsupported whyDidYouRender prop */\nMemoFunctionalComponent.whyDidYouRender = {nonWDYRProp: true}\n/* SHOULD ERROR because whyDidYouRender shouldn't be a string */\nMemoFunctionalComponent.whyDidYouRender = 'a'\n\n/* SHOULD ERROR because bad trackExtraHooks was provided (second argument should be string) */\nFunctionalComponent.whyDidYouRender = {trackExtraHooks: [[Redux, Redux.useSelector]]}\nFunctionalComponent.whyDidYouRender = {trackExtraHooks: [[Redux, 'useSelector']]}\n\nclass RegularClassComponent extends React.Component{\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass ClassComponentWithBooleanWDYR extends React.Component{\n static whyDidYouRender = true\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass ClassComponentWithObjWDYR extends React.Component{\n static whyDidYouRender = {collapseGroups: true}\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass ErroredClassComponentWithNonWDYRProp extends React.Component{\n /* SHOULD ERROR because we use an unsupported whyDidYouRender prop */\n static whyDidYouRender = {nonWDYRProp: 'a'}\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass ErroredClassComponentWithStringWDYR extends React.Component{\n /* SHOULD ERROR because whyDidYouRender shouldn't be a string */\n static whyDidYouRender = 'a'\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass ErrorousClassComponentWithTrackExtraHooks extends React.Component{\n static whyDidYouRender = {\n collapseGroups: true,\n /* SHOULD ERROR because bad trackExtraHooks was provided (second argument should be string) */\n trackExtraHooks: [[Redux, Redux.useSelector] as ExtraHookToTrack]\n }\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass ClassComponentWithTrackExtraHooks extends React.Component{\n static whyDidYouRender = {\n collapseGroups: true,\n trackExtraHooks: [[Redux, 'useSelector'] as ExtraHookToTrack]\n }\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass PureClassComponentWithBooleanWDYR extends React.PureComponent{\n static whyDidYouRender = true\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass PureClassComponentWithObjWDYR extends React.PureComponent{\n static whyDidYouRender = {collapseGroups: true}\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass ErroredPureClassComponentWithNonWDYRProp extends React.PureComponent{\n /* SHOULD ERROR because we use an unsupported whyDidYouRender prop */\n static whyDidYouRender = {nonWDYRProp: 'a'}\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n\nclass ErroredPureClassComponentWithStringWDYR extends React.PureComponent{\n /* SHOULD ERROR because whyDidYouRender shouldn't be a string */\n static whyDidYouRender = 'a'\n render(){\n const {str} = this.props\n return (\n {str}
\n )\n }\n}\n"
},
{
"path": "types.d.ts",
"content": "import * as React from 'react';\n\nexport interface HookDifference {\n pathString: string;\n diffType: string;\n prevValue: any;\n nextValue: any;\n}\n\nexport interface ReasonForUpdate {\n hookDifferences: HookDifference[];\n propsDifferences: boolean;\n stateDifferences: boolean;\n}\n\nexport interface UpdateInfo {\n Component: React.Component;\n displayName: string;\n prevProps: any;\n prevState: any;\n nextProps: any;\n nextState: any;\n prevHookResult: any;\n nextHookResult: any;\n reason: ReasonForUpdate;\n options: WhyDidYouRenderOptions;\n hookName?: string;\n}\n\nexport type ExtraHookToTrack = [any, string];\n\nexport interface WhyDidYouRenderOptions {\n include?: RegExp[];\n exclude?: RegExp[];\n trackAllPureComponents?: boolean;\n trackHooks?: boolean;\n logOwnerReasons?: boolean;\n trackExtraHooks?: Array;\n logOnDifferentValues?: boolean;\n hotReloadBufferMs?: number;\n onlyLogs?: boolean;\n collapseGroups?: boolean;\n titleColor?: string;\n diffNameColor?: string;\n diffPathColor?: string;\n textBackgroundColor?: string;\n notifier?: Notifier;\n customName?: string;\n}\n\nexport type WhyDidYouRenderComponentMember = WhyDidYouRenderOptions | boolean\n\nexport type Notifier = (options: UpdateInfo) => void\n\ndeclare function whyDidYouRender(react: typeof React, options?: WhyDidYouRenderOptions): typeof React;\n\ndeclare namespace whyDidYouRender {\n export const defaultNotifier: Notifier;\n}\n\nexport default whyDidYouRender;\n\ndeclare module 'react' {\n interface FunctionComponent {\n whyDidYouRender?: WhyDidYouRenderComponentMember;\n }\n\n interface VoidFunctionComponent
{\n whyDidYouRender?: WhyDidYouRenderComponentMember;\n }\n\n interface ExoticComponent
{\n whyDidYouRender?: WhyDidYouRenderComponentMember;\n }\n\n namespace Component {\n const whyDidYouRender: WhyDidYouRenderComponentMember;\n }\n\n /* not supported.\n see https://github.com/microsoft/TypeScript/issues/33892\n and https://github.com/microsoft/TypeScript/issues/34516\n and https://github.com/microsoft/TypeScript/issues/32185\n\n // interface Component
extends ComponentLifecycle {\n // static whyDidYouRender?: WhyDidYouRenderComponentMember;\n // }\n */\n}\n"
}
]
![](\"images/WDYR-logo.jpg\"){kind=logo}
\n